Back to SideMenu
View full API on SideMenu
SideMenu
Controlled
External buttons drive the active selection.
Selected: overview
API
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SideMenuNode[] | — | Tree of menu items with optional childNodes. |
| selectedItem | string | — | Controlled active parent id. |
| selectedChildItem | string | — | Controlled active child id. |
| onMenuItemClick | (payload: { id: string; parent?: { id: string } }) => void | — | Fires when a parent or child row is activated. |
| width | string | number | 190px | Maximum width of the menu. |
| disabled | boolean | false | Disables interaction for the entire menu. |
| noItemsText | string | No items to show | Empty-state copy when items is empty. |
| className | string | — | Merged onto the root `<nav>` element. |
| style | React.CSSProperties | — | Inline styles on the root `<nav>` element. |
| id / title / icon / badge / badgeVariant (SideMenuNode) | various | — | Fields on each parent menu item. |
| childNodes (SideMenuNode) | SideMenuChildNode[] | — | Nested rows shown when the parent is expanded. |
| value / valueClassName / icon (SideMenuChildNode) | various | — | Optional trailing value or icon on child rows. |
| disabled (SideMenuNode / SideMenuChildNode) | boolean | — | Disables an individual row. |
| onIconClick (SideMenuNode) | (item, event) => void | — | Optional handler on the trailing parent icon. |