Top-level site navigation with frosted dropdown panels of described links, built as disclosure navigation.
NavigationMenu is the marketing-site or docs header: a row of top-level items, each either a plain link or a button that opens a panel of links with a title, a description and an optional icon. A panel can lead with a feature block (a highlighted card) and lays its links in one to three columns.
It follows the WAI-ARIA disclosure navigation pattern, not role="menu": these are links, read as links. Clicking outside, tabbing out or pressing Esc closes the open panel.
inline renders the panel in normal flow beneath the bar instead of floating over the page, for docs and previews where it has to show open. defaultValue opens a panel on first render.
Installation
npx shadcn@latest add KezLahd/rime/navigation-menuAlso installs: base, icon.
Usage
import { NavigationMenu } from "@/components/ui";
<NavigationMenu
aria-label="Main"
items={[
{ id: "product", label: "Product", links: [{ href: "/projects", title: "Projects", description: "Plan work and track every order." }] },
{ id: "pricing", label: "Pricing", href: "/pricing" },
]}
/>Examples
Open panel with a feature block
Floating panels
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
NavigationMenu
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsRequired | ReadonlyArray<NavigationMenuItem> | ||
| aria-label | string | ||
| defaultValue | string | null | null | The panel open on first render, by item id. |
| inline | boolean | Renders the open panel in normal flow under the bar instead of floating over the page: for docs and previews, where the menu must show open. | |
| activeHref | string | The current page, for aria-current on the matching link. | |
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --navmenu-item-radius | var(--r-sm) | … |
| --navmenu-link-width | 230px | … |
| --navmenu-panel-max | 600px | … |
| --navmenu-radius | var(--r-lg) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --border-w | tokens.css | … |
| --brand-gradient-soft | tokens.css | … |
| --control-h-sm | tokens.css | … |
| --density | tokens.css | … |
| --dur | tokens.css | … |
| --dur-fast | tokens.css | … |
| --dur-slow | tokens.css | … |
| --ease | tokens.css | … |
| --ease-out | tokens.css | … |
| --focus-ring | tokens.css | … |
| --ink-body | tokens.css | … |
| --ink-brand | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-muted | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --line-brand | tokens.css | … |
| --popover-blur | tokens.css | … |
| --popover-border | tokens.css | … |
| --popover-shadow | tokens.css | … |
| --popover-surface | tokens.css | … |
| --r-lg | tokens.css | … |
| --r-sm | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-small | tokens.css | … |
| --wash-active | tokens.css | … |
| --wash-hover | tokens.css | … |
| --wash-subtle | tokens.css | … |
| --z-popover | tokens.css | … |
Accessibility
- Each dropdown trigger is a button with aria-expanded and aria-controls; panels hold ordinary links.
- Left and Right move between top-level items; Down opens a panel and focuses its first link; Up and Down move through links; Esc closes and returns focus to the trigger.
- activeHref marks the current page's link with aria-current="page".
Do and don't
Do
- Keep to five or six top-level items.
- Give every link a one-line description in panels with more than three links.
Don't
- Don't use it inside an app shell; that is SidebarShell's nav.
- Don't put actions (sign out, delete) in its panels; those belong in a Menu.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open navigation-menu.mdRelated: breadcrumb, menu, sidebar-shell