SidebarMenu
Vertical application navigation with sections, nested items, badges, four colour themes and a collapsed icon-only mode.
Import
import {
SidebarMenu,
SidebarMenuSection,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubItem,
} from "@raydenui/ui";Usage
Basic
Selection is by value, not href: each item carries a unique value and the menu
reports the active one through onValueChange. Wire that to your own router.
<SidebarMenu defaultValue="dashboard" className="w-[260px]">
<SidebarMenuSection>
<SidebarMenuItem value="dashboard" icon="grid">
Dashboard
</SidebarMenuItem>
<SidebarMenuItem value="transactions" icon="wallet">
Transactions
</SidebarMenuItem>
<SidebarMenuItem value="settings" icon="settings">
Settings
</SidebarMenuItem>
</SidebarMenuSection>
</SidebarMenu>Routing
SidebarMenuItem renders a <button>, so pass navigation through onValueChange:
const navigate = useNavigate();
const routes = { dashboard: "/", transactions: "/transactions" };
<SidebarMenu value={active} onValueChange={(value) => navigate(routes[value])}>
{/* … */}
</SidebarMenu>Sections
SidebarMenuSection groups items under an optional title.
<SidebarMenu defaultValue="dashboard" className="w-[260px]">
<SidebarMenuSection title="MAIN MENU" showDivider>
<SidebarMenuItem value="dashboard" icon="grid">
Dashboard
</SidebarMenuItem>
<SidebarMenuItem value="reports" icon="chart" badge={5}>
Reports
</SidebarMenuItem>
</SidebarMenuSection>
<SidebarMenuSection title="ACCOUNT">
<SidebarMenuItem value="settings" icon="settings">
Settings
</SidebarMenuItem>
</SidebarMenuSection>
</SidebarMenu>Nested items
Nest a SidebarMenuSub inside a SidebarMenuItem. The parent supplies the icon and
label; SidebarMenuSub itself takes only children.
<SidebarMenu defaultValue="invoices" className="w-[260px]">
<SidebarMenuSection>
<SidebarMenuItem value="finance" icon="bank">
Finance
<SidebarMenuSub>
<SidebarMenuSubItem value="invoices">Invoices</SidebarMenuSubItem>
<SidebarMenuSubItem value="payouts">Payouts</SidebarMenuSubItem>
</SidebarMenuSub>
</SidebarMenuItem>
</SidebarMenuSection>
</SidebarMenu>Themes
theme accepts "light", "blue", "dark-blue" and "dark-grey".
<SidebarMenu defaultValue="dashboard" theme="dark-blue" className="w-[260px]">
{/* … */}
</SidebarMenu>Collapsed
collapsed switches to an 82px icon-only rail. Items whose children are not a plain
string need an explicit label so the icon button still has an accessible name;
expandable items open their children in a flyout.
<SidebarMenu defaultValue="dashboard" collapsed>
<SidebarMenuSection showDivider={false}>
<SidebarMenuItem value="dashboard" icon="grid" label="Dashboard">
Dashboard
</SidebarMenuItem>
<SidebarMenuItem value="reports" icon="chart" label="Reports">
Reports
</SidebarMenuItem>
</SidebarMenuSection>
</SidebarMenu>Props
SidebarMenu
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled active item value |
defaultValue | string | — | Uncontrolled default active item |
onValueChange | (value: string) => void | — | Called when the active item changes |
collapsed | boolean | false | Icon-only mode, 82px wide |
theme | "light" | "blue" | "dark-blue" | "dark-grey" | "light" | Colour theme |
SidebarMenuSection
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Section title |
showDivider | boolean | — | Show a divider below the section |
SidebarMenuItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Unique identifier (required) |
icon | ReactNode | IconName | — | Leading icon |
badge | string | number | — | Count badge on the right |
label | string | — | Accessible name when collapsed. Required when children are not a string |
disabled | boolean | false | Disabled state |
SidebarMenuSub
Takes only children. Nest it inside a SidebarMenuItem, which supplies the icon and label.
SidebarMenuSubItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Unique identifier (required) |
Accessibility
- Items are buttons in a
menu; navigate with Tab and activate with Enter or Space. - When
collapsed, give every item alabel— an icon alone has no accessible name. - Expandable items expose
aria-expandedandaria-haspopup, and open a flyout when collapsed so nested destinations stay reachable.