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

API

Props

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

Події

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

Слоти

Назва	Опис
`item`	—
`child`	—

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

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

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

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

Доступність

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

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

NavigationMenu

Приклад