Sidebar

SidebarMenuButton (36px, 24px icon), SidebarMenuSubButton (inset with a 1px guide), SidebarMenuAction and the settings action. surface sidebar keeps the dark navigation in both modes; surface follows the content theme.

Figma: 10 / Components / Sidebar

Usage

Source: src/components/ui/sidebar-menu.tsx

import {
    SidebarMenuAction,
    SidebarMenuActionSettings,
    SidebarMenuButton,
    SidebarMenuSubButton
} from '@/components/ui/sidebar-menu'

<SidebarMenuButton icon={<Users />} label='Supporters' expandable expanded={open} onClick={toggle} />
<SidebarMenuSubButton label='All Supporters' href='/supporters' />

Examples

SidebarMenuAction and Settings

New

When to use

When to reach for it, and when to use something else.

Use it for

The app navigation in AppSidebar.

surface variant for navigation inside the content area.

Avoid

Changing the dark navigation colors in dark mode; the nav stays dark in both.

API reference

SidebarMenuButton

Prop	Type	Default	Description
icon	ReactNode	–	A 24px icon.
label	ReactNode	–	The item name.
surface	'sidebar' \| 'surface'	'sidebar'	Dark navigation or content theme.
active	boolean	false	The current section.
expandable	boolean	false	Shows the caret for a group.
expanded	boolean	false	Flips the caret.
href	string	–	Renders a link instead of a button.
trailing	ReactNode	–	A badge or NotificationIndicator.

SidebarMenuSubButton

Prop	Type	Default	Description
label	ReactNode	–	The item name.
active	boolean	false	The current page.
badge	ReactNode	–	For example the Beta badge.

PreviousSeparator NextSwitch