NavigationMenu
Top-level site navigation with flyout panels and accessible keyboard interaction.
Examples
Basic horizontal
Simple horizontal navigation links with hover states.
With active indicator
A brand-coloured underline marks the currently active page.
Responsive (mobile hamburger)
Collapses to a hamburger toggle on narrow viewports.
Menu
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { NavigationMenu } from "@rokle/components";import { NavigationMenu } from "@rokle/components";
export function Example() {
return <NavigationMenu />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | NavItem[] | - | Navigation items with optional sub-items. |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout orientation. |