Ravox KitNavigation
Navigation Menu
The top menu of a site: items with rich panels that open on hover or click, a highlight that slides behind the item, and WAI-ARIA keyboard support. When space runs out, it becomes a menu button with sections that open and close.
Settings
Toggles
Examples
Links only, with the current page
Panel with a featured item
With Next's Link
Installation
The command creates components/ui/navigation-menu.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add navigation-menuProps
| Prop | Type | Default | Description |
|---|---|---|---|
| align | "start" | "center" | "end" | "start" | Where the items sit in the width of the menu (NavigationMenu). Give it a width (flex-1 or w-full): the switch to the menu button measures the menu itself. |
| label | string | "Main" | Name of the <nav> for screen readers (NavigationMenu). |
| label + children | ReactNode | — | Item with a panel: the button text and the panel content (NavigationMenuItem). |
| href / asChild / active | string / boolean / boolean | — | Simple item, no panel: a direct link or Next's <Link> as the child; active sets aria-current (NavigationMenuItem). |
| columns | 1 | 2 | 3 | 2 | Grid of links in the panel; becomes one column in the narrow version (NavigationMenuGrid). |
| title / description / icon | ReactNode | — | The rich link of the panel (NavigationMenuLink). Accepts href, active and asChild. |