Sidebar

A navigation component for displaying menu items and links in a vertical layout.

When To Use

Use the Sidebar component when you need to:

Create a consistent navigation experience for your application
Organize menu items hierarchically
Provide a visible structure for your application
Display navigation, categories, or actions in a vertical layout
Implement collapsible or expandable navigation sections
Create admin panels, dashboards, or complex applications

Sidebars help users navigate and understand the structure of your application, providing clear pathways to different sections or features.

Examples

Basic#

Dashboard

This is the main content area that would contain your application's primary information.

Collapsible#

Dashboard

This demo shows a collapsible sidebar. Click the toggle button in the sidebar header to collapse or expand it.

When collapsed, tooltips appear on hover to show the menu item labels.

Mobile Responsive#

Dashboard

This is the desktop view with a permanent sidebar.

Try resizing your window to see it switch between:

Mobile: Sheet/Drawer-based sidebar
Desktop: Permanent sidebar

Custom#

Dashboard

This demo showcases a custom styled sidebar with several advanced features:

Custom color scheme using the primary color
User profile with dropdown menu
Notification badges for inbox and alerts
Nested dropdown menu for documents section
Active state highlighting

Props

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Sheet

A component for displaying a sheet.

Skeleton

A component for displaying a skeleton loading state.