Navigation Menu
Site navigation with links and buttons that open panels of more links.Links and panels
Preview
Code
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { NavigationMenu } from '@advui/core'
<NavigationMenu aria-label="Main">
<NavigationMenu.Link href="/" active>Home</NavigationMenu.Link>
<NavigationMenu.Item label="Data">
<NavigationMenu.Link href="/5w" description="Who does what, where">5W dashboard</NavigationMenu.Link>
</NavigationMenu.Item>
</NavigationMenu>API reference
NavigationMenu
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | 'Main' | Names the landmark. Needed when a page has more than one. |
value | string | null | — | The open item (its `value` or `label`). |
defaultValue | string | null | — | Starting `value` when uncontrolled. |
onValueChange | (value: string | null) => void | — | Called with the new `value`. |
NavigationMenu.Link
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | — | Link target. On iOS and Android a path goes to the router registered with `setRouter`, and an absolute URL opens with the system. |
onPress | (event) => void | — | Called before the `href` is followed; `event.preventDefault()` stops it. Without an `href`, navigate here. |
render | ReactElement | — | Your router’s link, e.g. `render={<Link href="/maps" />}`. |
active | boolean | false | The current page (`aria-current="page"`). |
description | ReactNode | — | Second line, in panels. |
icon | ReactNode | — | Icon before the title, in panels. |
NavigationMenu.Item
| Prop | Type | Default | Description |
|---|---|---|---|
label required | string | — | Button text. |
value | string | — | Id for `value`. Default: `label`. |
panelWidth | SizeTokens | number | '72' | Width of the panel. iOS and Android show the links under the bar.Web only. |
children required | ReactNode | — | `NavigationMenu.Link` elements shown in the panel. |
Accessibility
- A
navlandmark with a list of links and buttons. It follows the WAI-ARIA disclosure navigation pattern, notmenu, so every link is a normal Tab stop and is announced as a link. - Item buttons set
aria-expandedand (on web)aria-controlspointing at their panel. - The current page has
aria-current="page"on web; on native its name ends with "current page". - Escape closes the open panel and returns focus to its button. Pressing or tabbing outside closes it, and so does following a link.
| Key | Action |
|---|---|
| Tab | Moves through the links and buttons, into an open panel. |
| Enter / Space | Opens or closes a panel; follows a link. |
| Escape | Closes the panel and focuses its button. |
Responsive behavior
The bar wraps when it runs out of room. On phones, prefer a Sidebar in a Drawer for long navigation.
Platform notes
Web
Panels float under their button (
zIndex.dropdown).iOS
The open panel shows under the bar instead of floating, so it never covers the screen. A path in
href goes to the router registered with setRouter (since 0.15.0; before, links navigated only in onPress).Android
Same as iOS; the back button closes an open panel.