Waiting for action
Icon-led side navigation surface matching the Opus documentation menu.
Pass a menu array to render the sidebar from configuration. Use defaultActiveItem when the Sidebar should manage its own selected item, or activeItem when the parent should fully control selection. The selected item bubbles up through onSelect.
Use renderIcon when your menu stores icon keys as strings. The JSX subcomponents (SidebarNav, SidebarLink, and SidebarGroup) are still available for custom composition. Give child links an itemId to opt into the same active matching and parent onSelect callback flow, or pass onSelect directly to a SidebarLink for a per-link child callback.
Set persistState to store the selected item and open groups in localStorage. By default the key is generated from a hash of the menu structure and nav label, so multiple data-driven sidebars do not collide. Pass storageKey when you need an explicit key, especially for JSX children-only sidebars.
| Prop | Type | Default | Description |
|---|---|---|---|
menu | SidebarMenuItem[] | — | Data-driven navigation items and groups. |
activeItem | string | — | Controlled active menu item id. |
defaultActiveItem | string | — | Initial active item when Sidebar manages selection internally. |
onSelect | (item) => void | — | Shared callback for menu items and child links with itemId. |
persistState | boolean | false | Persists selected item and group open state. |
storageKey | string | hashed menu | Explicit persistence key for this sidebar instance. |
renderIcon | (icon) => ReactNode | — | Renders string icon keys from menu data. |
itemId | string | — | SidebarLink id for child callbacks and active matching. |
side | SidebarSide | "left" | Position. |
collapsed | boolean | — | Icon-only mode. |
icon | ReactNode | string | — | Optional icon on menu items, SidebarLink, and SidebarGroup. |
h2; groups labelled when collapsed.Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…