Layout/Sidebar

Sidebar

A vertical navigation sidebar. Renders as a static column on desktop and collapses into an off-canvas overlay panel below the md: breakpoint.

import { Sidebar, SidebarItem } from "@animui/ui"

Basic

Resize below the md: breakpoint (or view on a small screen) to see it collapse into an overlay opened by the hamburger button.

Acme Inc

Dashboard

Content for Dashboard goes here.

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Sidebar content, typically a header and SidebarItem rows.
`open`	`boolean`	`false`	Controls the off-canvas panel visibility on mobile (below md:).
`onOpenChange`	`(open: boolean) => void`	—	Called when the mobile panel should open or close (backdrop click, Escape, item click).
`className`	`string`	—	Additional classes applied to the sidebar panel.

Prop	Type	Default	Description
`icon`	`React.ReactNode`	—	Icon rendered before the label.
`children`	`React.ReactNode`	—	The item label. Truncated if it overflows.
`active`	`boolean`	`false`	Highlights the item as the current page.
`onClick`	`() => void`	—	Called when the item is clicked.
`className`	`string`	—	Additional classes for the item button.