Nav Menu
FREEVertical navigation with icons, badges, nested collapsible groups and a highlight that glides to the active page.
Installation
Terminal
npx @bloxa/cli add nav-menu
# or: npx shadcn@latest add @bloxa/nav-menuPackages installed automatically: motion, radix-ui
Examples
Icons, badges and nested groups
Click an item and the highlight glides to it. This site's docs menu is a NavMenu too.
API reference
Every component also accepts the props of the element it renders.
NavMenu
| Prop | Type | Default | Description |
|---|---|---|---|
| current | string | — | Current location (e.g. pathname); matching items are active. |
| matchNested | boolean | false | Treat nested routes as active. |
NavSection
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Small section heading. |
NavItem
| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | — | Link. |
| icon | ReactNode | — | Icon on the left. |
| badge | ReactNode | — | Count or label on the right. |
| active | boolean | — | Force the active state. |
| asChild | boolean | false | Render your router link (e.g. Next Link). |
NavGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| title / icon / badge | ReactNode | — | Group title, icon and badge. |
| defaultOpen | boolean | — | Start open; by default a group holding the active item opens itself. |