Навигационное меню
Навигационное меню — основная навигация сайта или приложения: ряд ссылок, где некоторые пункты открывают панель с другими ссылками.
Analytics Billing
<tk-navigation-menu label="Main">
<tk-navigation-menu-item>
Products
<ul slot="panel">
<li><tk-link href="/analytics" treatment="quiet">Analytics</tk-link></li>
<li><tk-link href="/billing" treatment="quiet">Billing</tk-link></li>
</ul>
</tk-navigation-menu-item>
<tk-navigation-menu-item href="/pricing">Pricing</tk-navigation-menu-item>
<tk-navigation-menu-item href="/docs" current>Docs</tk-navigation-menu-item>
</tk-navigation-menu>Анатомия
| Часть | Что это |
|---|---|
tk-navigation-menu |
ориентир <nav> со списком пунктов |
tk-navigation-menu-item с href |
ссылка |
tk-navigation-menu-item с panel |
кнопка, которая открывает панель; это показывает шеврон |
| панель | всплывающая поверхность с вашими ссылками; раскладку задаёте вы |
Пункт — либо ссылка, либо кнопка, но не то и другое сразу. Если заданы и href, и панель,
побеждает панель. disabled нет: чтобы пункт не был ссылкой, не задавайте href.
Панели
Содержимое панели — ваше. Для короткого выпадающего списка напишите список
Guides Blog
<tk-navigation-menu label="Main">
<tk-navigation-menu-item>
Resources
<ul slot="panel">
<li><tk-link href="/guides" treatment="quiet">Guides</tk-link></li>
<li><tk-link href="/blog" treatment="quiet">Blog</tk-link></li>
</ul>
</tk-navigation-menu-item>
</tk-navigation-menu>Для панели побольше разложите колонки, в каждой заголовок и список:
Analyze
Dashboards
Operate
Billing
<tk-navigation-menu label="Main">
<tk-navigation-menu-item>
Products
<div slot="panel" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-24)">
<div><h3>Analyze</h3><ul><li><tk-link href="/dashboards" treatment="quiet">Dashboards</tk-link></li></ul></div>
<div><h3>Operate</h3><ul><li><tk-link href="/billing" treatment="quiet">Billing</tk-link></li></ul></div>
</div>
</tk-navigation-menu-item>
</tk-navigation-menu>- В панели только ссылки. Никаких кнопок, действий и полей формы.
- Не вкладывайте панель в панель.
- Панель не шире 720px и не выше 560px, дальше она прокручивается.
Открытие
- Клик,
EnterилиSpaceна пункте открывают его панель.Downоткрывает её и переводит фокус на первую ссылку. - При наведении панель открывается с небольшой задержкой, чтобы она не мелькала от случайно проходящего курсора. К панели можно вести курсор наискосок, она не закроется.
- Один фокус панель не открывает, касание тоже.
- Открыта одна панель за раз. Её закрывают
Esc, клик снаружи, уход курсора или уход фокуса из меню. Сама по таймеру она не закрывается.
Текущая страница
current отмечает страницу, на которой человек сейчас. У пункта появляется подчёркивание
2px, и он остаётся ссылкой.
<tk-navigation-menu label="Docs sections"> <tk-navigation-menu-item href="/guides">Guides</tk-navigation-menu-item> <tk-navigation-menu-item href="/components" current>Components</tk-navigation-menu-item> <tk-navigation-menu-item href="/tokens">Tokens</tk-navigation-menu-item> </tk-navigation-menu>
Состояния
В покое пункты приглушены. При наведении и фокусе с клавиатуры пункт темнеет, а подпись подчёркивается; при фокусе появляется ещё и рамка. Пункт с открытой панелью остаётся тёмным, а его шеврон переворачивается.
Мобильная версия
Своей точки перелома у меню нет. На узких экранах положите те же ссылки в
Когда использовать
- Навигационное меню — для основной навигации сверху на каждой странице.
- Если навигация — высокая колонка рядом со страницей, берите
Sidebar . - Для действий вроде «Дублировать» или «Выйти» берите
Menu . Каждый пункт навигационного меню ведёт на страницу. - Чтобы переключать разделы внутри одной страницы, берите
Tab bar . - Чтобы показать, где находится страница, берите
Breadcrumb ; крошки стоят рядом с меню, а не вместо него. - Панели только одного уровня. Для глубокой иерархии берите Sidebar или
Tree .
Текст
- Называйте пункт по странице или группе, одним-двумя словами: «Цены», «Продукты».
- Ссылки в панели короткие, заглавная буква только в начале.
- Не пишите в имени ориентира слово «навигация»:
label="Main", а не «Main navigation».
Можно / нельзя
| ✅ Можно | ❌ Нельзя |
|---|---|
| Ссылки в панелях | «Выйти» или «Удалить» в панели: для этого menu |
| Панели одного уровня | Панель, открытая из другой панели |
Свой label у каждого <nav> |
Слово «навигация» в имени |
| Пункт — ссылка или кнопка панели | Пункт и с href, и с панелью |
| Sheet на узких экранах | Ряд, втиснутый в экран телефона |
Связанные
Sidebar : основная навигация колонкой; вложенные строки раскрываются на месте.Menu : действия.Tab bar : разделы внутри одной страницы.Breadcrumb : где находится страница.Link : тихие ссылки в панелях.
API
tk-navigation-menu
| Атрибут | Тип | По умолчанию | Что делает |
|---|---|---|---|
label |
string | Main |
доступное имя ориентира |
| Слот | Содержимое |
|---|---|
| по умолчанию | элементы tk-navigation-menu-item по порядку чтения |
tk-navigation-menu-item
| Атрибут | Тип | По умолчанию | Что делает |
|---|---|---|---|
href |
string | — | делает пункт ссылкой |
target |
string | — | target ссылки |
rel |
string | — | rel ссылки |
current |
boolean | false |
страница, на которой человек сейчас: aria-current="page" и подчёркивание |
open |
boolean | false |
только для чтения: открыта ли панель |
| Слот | Содержимое |
|---|---|
| по умолчанию | подпись пункта |
panel |
содержимое панели; с ним пункт становится кнопкой |
События
| Событие | Detail | Можно отменить | Когда |
|---|---|---|---|
tk-toggle |
{ open, item } |
да | перед тем как панель откроется или закроется; отмените, чтобы управлять панелями самим |
Событие приходит от tk-navigation-menu.
CSS
tk-navigation-menu::part(list): ряд<ul>.tk-navigation-menu-item::part(trigger): кнопка или ссылка пункта.tk-navigation-menu-item::part(panel): панель.
Токены
| Часть | Токены |
|---|---|
| пункт | text/secondary, Label Medium (14/20) |
| пункт, наведение / фокус / открыт | text/default; при наведении и фокусе подпись подчёркнута |
| текущий пункт | text/default + подчёркивание 2px border/selected |
| панель | surface/raised + shadow-2, radius-16, отступ space-12; в контрастной теме border/default |
| рамка фокуса | border/accent/focus |
Значения по темам:
Доступность
Встроено:
- Именованный ориентир
<nav>вокруг настоящего списка. - Пункты с панелями — настоящие кнопки с
aria-expanded; ролей меню нет, как и предписывает ARIA-паттерн навигации сайта. - Открытая панель стоит в порядке чтения сразу после своей кнопки, и Tab проходит по её ссылкам.
currentставитaria-current="page"; подчёркивание отмечает пункт не только цветом.- Панель, открытая наведением, не закрывается, пока на ней курсор, закрывается по
Escи не исчезает по таймеру. - При уменьшенной анимации шеврон переворачивается без движения.
На вашей стороне:
- Дайте каждому
<nav>на странице свойlabel, например «Main» и «Breadcrumb». - Пишите в выпадающем списке настоящие
<ul>и<li>, чтобы он читался как список. - Кладите в панели только ссылки.
| Клавиша | Действие |
|---|---|
Tab |
переходит по пунктам, а при открытой панели и по её ссылкам |
Enter / Space |
на пункте с панелью: открывает или закрывает её |
Esc |
закрывает панель и возвращает фокус на её пункт |
Right / Left |
к следующему или предыдущему пункту |
Down |
на пункте с панелью: открывает её и переходит к первой ссылке |
Home / End |
к первому или последнему пункту |
Стрелки дополняют Tab: каждый пункт и каждая ссылка остаются остановками Tab.