Пункт без children — посилання. to рендериться через NuxtLink (з #components, як в UiButton) і переходить без перезавантаження сторінки; href — звичайний <a> для зовнішніх адрес і якорів. Подія select приходить для обох.

v-model не обов'язковий: без нього меню саме пам'ятає, яка група відкрита. current на дочірньому пункті ставить aria-current="page", а його група отримує aria-current="true" і той самий акцентний стан, що й поточна сторінка.

Розмір і вигляд

Пропси size і variant керують пропорціями та виглядом кореневих пунктів, шеврона і панелі разом. Стан «поточної сторінки» малюється з current пункту: underline підкреслює його, pill дає брендову підкладку, plain змінює колір на акцентний.

API

Props

Назва	Тип	Типово	Опис
`items`*	`NavigationMenuItem[]`	—	Пункти меню. Пункт із `children` стає кнопкою з панеллю, без них — звичайним посиланням: `to` — маршрут через NuxtLink, `href` — пряма адреса.
`modelValue`	`string`	`undefined`	Id відкритого пункту або `null`. Використовуйте через `v-model`; без нього меню саме тримає, яка група відкрита.
`ariaLabel`	`string`	`"Головна навігація"`	Доступна назва навігації. На сторінці зазвичай кілька `nav`, і без назви їх не розрізнити.
`size`	lgsmmd	`"md"`	Розмір пунктів, шеврона і панелі. На дотику кореневі пункти добудовує до 45px невидима зона, а рядки панелі на телефоні — 45px заввишки: нижче 44px палець промахується.
`variant`	plainunderlinepill	`"plain"`	Вигляд кореневих пунктів. `plain` — прозорі з hover-підкладкою, `underline` — підкреслення активної сторінки, `pill` — капсули з брендовою підкладкою на активній.
`placement`	bottom-startbottombottom-end	`"bottom-start"`	Бажана позиція панелі відносно пункту.
`panelWidth`	`string`	`"20rem"`	Ширина панелі, будь-яка CSS-величина.

Події

Назва	Payload	Опис
`update:modelValue`	`[value: string]`	Ідентифікатор відкритої групи або null. Без v-model меню тримає цей стан саме.
`select`	`[item: NavigationMenuItem \| NavigationMenuChild]`	Обраний кореневий або дочірній пункт.

Слоти

Назва	Опис
`item`	Власний вміст кореневого пункту (без вкладених посилань і кнопок).
`child`	Власний вміст пункту панелі.

Коли використовувати

Для головної навігації продукту, де кілька верхніх пунктів розкривають невеликі групи повʼязаних сторінок. Прості пункти лишаються справжніми посиланнями, групи — кнопками.

Коли НЕ використовувати

Не використовуйте як меню дій або великий багаторівневий sitemap. Для команд є UiMenu, а глибоку структуру краще показати через UiSidebar.

Доступність

Це disclosure-навігація, а не menubar: група — кнопка з aria-expanded і aria-controls, пункти — справжні посилання в списку. Ролі menubar/menuitem, що стояли тут раніше, обіцяли скрінрідеру контракт меню, якого компонент не виконував, і ховали семантику посилань.

Tab проходить кожен доступний кореневий пункт. З відкритої групи Tab веде в її панель, Shift+Tab з першого пункту панелі — назад на тригер, а Tab з останнього закриває панель і продовжує рух від тригера: панель телепортована в кінець <body>, і без цього фокус падав за кінець документа. Фокус, що пішов за межі меню й панелі, закриває панель.

ArrowLeft і ArrowRight переміщують фокус між кореневими пунктами, ArrowDown відкриває групу, Home та End переходять до країв. У панелі працюють ArrowUp, ArrowDown і Escape. Disabled-посилання не потрапляють у обхід.

На дотику кореневі пункти добудовує до 45px невидима зона, а рядки панелі на телефоні — 45px заввишки.

Шеврон групи — SVG, а не текстовий знак: символ «⌄» шрифти малюють по-своєму, дрібно й зі з'їздом від базової лінії, тож вигляд залежав би від системного шрифту. SVG масштабується пропорційно size і фарбується через currentColor.

NavigationMenu

Приклад

Посилання і стан