Компонент · рівень 2

Хлібні крихти

Де людина зараз і один дотик на рівень вище. 14 на кольоровому шарі: на кожному лістингу, кожному товарі й кожній сторінці кабінету.

рівень 2design/system/components/breadcrumb.css78 рядків14 крихт141 екран

Анатомія

1Ланка - рівень, на який можна повернутися. Приглушена, бо це орієнтир, а не зміст: людина читає крихти, коли загубилась, і пропускає, коли ні

2Поточна - чорнилом і жирним. Єдина, що не є посиланням, і має виглядати кінцем рядка, а не ще одним кроком

3Розділювач - --mark-disabled, не сірий ланки: це пунктуація, і читатися посиланням вона не повинна

Роздільник не був атомом

До цього кроку separator.css був окремим файлом рівня 1 з одним правилом - .crumb .sep{ color; margin }, - тобто компонент рівня 1, привязаний до рівня 2. Той самий дефект, що мала availability.css до 7.35 і price.css до 7.36, у найменшому можливому вигляді.

Заміряно перед видаленням: 47 роздільників у кольоровій розмітці, 0 з них поза .crumb. Знак, який не може існувати без свого батька, є частиною батька. Вітрина втратила атом і отримала першу молекулу - і це чесний рахунок.

А коса риска була надрукована 47 разів - <span class="sep">/</span>, по одній на проміжок. Той самий дефект, що 107 крапок на 7.35. Тепер її малює CSS в одному місці, а design/_nav.js ставить їй aria-hidden, бо скринрідер читав «Головна слеш Протеїн слеш Whey». Сірий шар зберігає свої 211: заморожений з етапу 05.

Стани

Наведіть на «Головна» і пройдіть Tab по цій крихті - кільце фокуса зявилось на цьому кроці, і до нього 14 крихт продукту були досяжні клавіатурою й не показували нічого.

ховер уже був і був правильний - слово йде в акцент за ті самі .15s, що бере кожне посилання системи. Бракувало того, що бачить клавіатура: outline: none у base.css знімає й власне кільце Chrome, тож не було нічого

Стан	Що робить	Чому так
спокій	`--text-muted`	орієнтир, не зміст
наведення	`--text-action`	те саме, що всі посилання системи
фокус	`--ring-focus-control`	те саме кільце, що в кнопки, поля, чіпа, радіо й чекбокса. `:focus-visible`, щоб миша його не запалювала
натискання	немає, і це відмова	крок 7.33: у 601 текстового посилання продукту немає землі, яку можна затемнити, і дати її одному означало б зробити його єдиним, що спалахує. Відповідь у спокої - те, у що палець цілиться
неактивна	немає, і її не буває	перевірено на всіх 14: кожна крихта крім останньої - посилання. Рівень, на який не можна перейти, у стежці не стояв би

Варіанти і розміри

Матриця осей, а не перелік входжень: кожен рядок це питання, на яке відповідає розмітка, і правило, за яким обирають.

Вісь	Значення	Правило вибору
Глибина	2 · 3 · 4 ланки	Стільки, скільки рівнів між головною і поточним. Крихти не скорочують і не згортають у «...» - на 360 вони переносяться рядком, і це дешевше, ніж ховати шлях.
Остання ланка	завжди не посилання	Сторінка, на якій людина стоїть, не є переходом. `aria-current="page"` ставить `design/_nav.js`: у розмітці це `<span>`, і сама вона нічого не каже.

Коли вживати

Скрізь, де є рівень вище. Немає на головній, у кошику й в оформленні - там шлях назад це не ієрархія, а крок процесу, і його несе Кнопка.

Правило і антиправило

Правило

Крихти показують ієрархію, а не історію. «Головна / Протеїн / Whey» - це де товар лежить, незалежно від того, звідки людина прийшла.

Антиправило

Не роби останню ланку посиланням на себе. Клік, який нічого не змінює, - це обіцянка переходу, якого немає.

Обмеження

Правила вживання, які називають саме цей компонент: U4. Автор правил один, і це architecture.html, розділ I; тут - витяг.

Крихти стоять лише там, де в сторінки є батько. На 31 сірому екрані їх немає навмисно: головна та її стани, кошик, вхід, оформлення, мегаменю, order-placed і службові сторінки.

Холостий контроль

Сторінка звіряє себе з файлом: 3 власних класів і 3 станів оголошено в breadcrumb.css. Нижче - ті, яких на цій сторінці немає ні в демо, ні в розмітці.

Рух

Робота: ВІДПОВІДЬ. Рухається: колір крихти. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них, тобто числа у файлі немає. При prefers-reduced-motion рух зникає, а стан лишається.

Токени

Прочитані з breadcrumb.css, не переписані руками. Колір іде лише через роль, геометрія - напряму з примітива.

Семантичні ролі (5)	Примітиви (6)
`--mark-disabled` `--ring-focus-control` `--text-action` `--text-muted` `--text-primary`	`--fs-12` `--fw-bold` `--radius-4` `--space-8` `--space-12` `--space-16`
–	`--dur-fast` `--ease-standard`

Розмітка

<nav class="crumb" aria-label="Хлібні крихти"> <a href="index.html">Головна</a><span class="sep"></span> <a href="listing.html">Протеїн</a><span class="sep"></span> <span class="cur">Whey Gold Standard</span> </nav>

Коса риска в розмітці не пишеться - її малює CSS. aria-current і aria-hidden ставить design/_nav.js, бо розмітку будує заморожений сірий шар.

Де вживається

Якорі: .crumb .sep .cur

Заміряно в браузері на 390 і 1280: 14 крихт на 22 кольорових екранах, 47 роздільників, 14 поточних ланок.

Немає в коді -> етап 09

Чого бракує

Немає поведінки на 360 при довгій назві - «Whey Gold Standard 100% Protein» переносить крихту в два рядки, і правила про це немає
.cur носить те саме ім'я, що поточна сторінка в панелі станів прототипу (.wf-bar .cur). Зіткнення сьогодні немає - селектор привязаний до .crumb, - але ім'я спільне. Крок 6
Немає schema.org BreadcrumbList - крихти це найпряміший сигнал ієрархії для пошуку, і розмітки під нього поки немає

Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.