Navigation
Menu
Vertical, horizontal, and collapsible navigation menu with nested sub-menus, icons, and disabled states.
Inline (vertical)
Collapsed (icons only)
Installation
npx benflux-ui add menuUsage
import { Menu, type MenuItem } from "@benflux-ui/react"
const items: MenuItem[] = [
{ key: "home", label: "Home", icon: <Home /> },
{
key: "analytics",
label: "Analytics",
icon: <BarChart2 />,
children: [
{ key: "overview", label: "Overview" },
{ key: "reports", label: "Reports" },
],
},
{ key: "settings", label: "Settings", disabled: true },
]
<Menu
items={items}
selectedKey={selected}
onSelect={setSelected}
mode="inline" // "inline" | "horizontal" | "vertical"
collapsed={false} // collapse to icons only
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | MenuItem[] | — | Array of menu item definitions |
| selectedKey | string | — | Key of the currently active item |
| onSelect | (key: string) => void | — | Callback when an item is clicked |
| mode | "inline" | "horizontal" | "vertical" | "inline" | Layout direction of the menu |
| collapsed | boolean | false | Collapse to icon-only mode (vertical inline only) |
| defaultOpenKeys | string[] | [] | Keys of sub-menus open by default |