Sidebar Menu

Pro

A button that opens a panel of options from the side. Rows arrive one after another, a highlight follows the pointer, and groups open in place.

Current pageInbox

pnpm dlx shadcn@latest add @latheui/sidebar-menu

Part of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.

Sidebar Menu is part of Lathe Pro

The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.

Get Pro I have Pro

Depends on

motion
radix-ui
lathe/motion
lathe/use-controllable-state

API reference

SidebarMenu

Prop	Type	Default	Description
label* (required)	string	—	Title of the panel, and the default trigger's name.
sections* (required)	{ heading?, items }[]	—	Groups of items, in order.
current	string	—	The id or href of the current item. It gets a solid highlight and aria-current.
onSelect	(item) => void	—	Called when an item is chosen. The panel then closes.
side	"left" \| "right"	"left"	The edge the panel slides from.
open / defaultOpen	boolean	—	Controlled or initial state.
onOpenChange	(open: boolean) => void	—	Called when the panel opens or closes.
header	ReactNode	—	Top of the panel, in place of the title. The title stays for screen readers.
footer	ReactNode	—	Pinned to the bottom, such as an account row.
trigger	ReactElement	—	Your own button. A menu icon button when not set.
width	number	300	Panel width in px, never wider than the screen.
renderLink	(item, props) => ReactNode	—	Renders items with an href. Spread props onto your router's link.

SidebarMenuItem

Prop	Type	Default	Description
id* (required)	string	—	Unique across the menu.
label* (required)	string	—	Row text.
href	string	—	Makes the row a link. Otherwise it is a button.
icon	ReactNode	—	Shown before the label.
badge	ReactNode	—	Shown at the end, such as a count.
items	SidebarMenuItem[]	—	One level of sub-items, shown in a group that opens and closes.
disabled	boolean	—	Dims the row and ignores it.

Keyboard

TabShift + Tab: Moves through the rows. Focus stays inside the panel while it is open.
EnterSpace: Chooses a row, or opens and closes a group.
Escape: Closes the panel and returns focus to the trigger.

Accessibility

Built on Radix Dialog: focus moves into the panel, stays there, and returns to the trigger on close.
The panel is titled with label, and its rows sit in a nav landmark of the same name.
Groups are buttons with aria-expanded. The current item has aria-current.
The current item is marked by a bar and a filled background, not by color alone.

Motion

The panel slides in on the smooth spring while the page behind it dims.
Rows arrive 25ms apart from the side the panel came from.
The hover highlight slides between rows on the hover spring. Groups open by growing to their height, with the chevron turning.
With reduced motion, the panel fades and nothing slides.

Customization

From the right, with your own button

<SidebarMenu
  side="right"
  label="Account"
  sections={sections}
  trigger={<Button variant="outline">Account</Button>}
/>

Next.js links

<SidebarMenu
  label="Menu"
  sections={sections}
  current={pathname}
  renderLink={(item, { children, ...props }) => <Link {...props}>{children}</Link>}
/>

API reference

SidebarMenu

Prop	Type	Default	Description
label* (required)	string	—	Title of the panel, and the default trigger's name.
sections* (required)	{ heading?, items }[]	—	Groups of items, in order.
current	string	—	The id or href of the current item. It gets a solid highlight and aria-current.
onSelect	(item) => void	—	Called when an item is chosen. The panel then closes.
side	"left" \| "right"	"left"	The edge the panel slides from.
open / defaultOpen	boolean	—	Controlled or initial state.
onOpenChange	(open: boolean) => void	—	Called when the panel opens or closes.
header	ReactNode	—	Top of the panel, in place of the title. The title stays for screen readers.
footer	ReactNode	—	Pinned to the bottom, such as an account row.
trigger	ReactElement	—	Your own button. A menu icon button when not set.
width	number	300	Panel width in px, never wider than the screen.
renderLink	(item, props) => ReactNode	—	Renders items with an href. Spread props onto your router's link.

SidebarMenuItem

Prop	Type	Default	Description
id* (required)	string	—	Unique across the menu.
label* (required)	string	—	Row text.
href	string	—	Makes the row a link. Otherwise it is a button.
icon	ReactNode	—	Shown before the label.
badge	ReactNode	—	Shown at the end, such as a count.
items	SidebarMenuItem[]	—	One level of sub-items, shown in a group that opens and closes.
disabled	boolean	—	Dims the row and ignores it.

Accessibility

Built on Radix Dialog: focus moves into the panel, stays there, and returns to the trigger on close.
The panel is titled with label, and its rows sit in a nav landmark of the same name.
Groups are buttons with aria-expanded. The current item has aria-current.
The current item is marked by a bar and a filled background, not by color alone.

Motion

The panel slides in on the smooth spring while the page behind it dims.
Rows arrive 25ms apart from the side the panel came from.
The hover highlight slides between rows on the hover spring. Groups open by growing to their height, with the chevron turning.
With reduced motion, the panel fades and nothing slides.

Customization

From the right, with your own button

<SidebarMenu
  side="right"
  label="Account"
  sections={sections}
  trigger={<Button variant="outline">Account</Button>}
/>

Next.js links

<SidebarMenu
  label="Menu"
  sections={sections}
  current={pathname}
  renderLink={(item, { children, ...props }) => <Link {...props}>{children}</Link>}
/>

API reference

SidebarMenu

SidebarMenuItem

Keyboard

Accessibility

Motion

Customization

From the right, with your own button

Next.js links

Related

API reference

SidebarMenu

SidebarMenuItem

Keyboard

Accessibility

Motion

Customization

From the right, with your own button

Next.js links

Related