Ethereal Garden

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

A
App NameNavigation

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 header to collapse or expand it.

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

Mobile Responsive

Dashboard

This demo shows a responsive sidebar that automatically adapts to mobile and desktop views.

On mobile devices:

  • The sidebar is hidden by default
  • Click the menu button in the header to open it as a sheet
  • The sidebar automatically closes when you click outside or select an item

On desktop:

  • The sidebar is always visible
  • You can toggle it using the button in the header

Custom

JD
John Doe
Administrator

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

PropTypeDefault
onOpenChange?
((open: boolean) => void)
-
open?
boolean
-
defaultOpen?
boolean
-
key?
Key | null
-
ref?
Ref<HTMLDivElement>
-

Sheet

A panel that slides out from the edge of the screen.

Skeleton

A component for displaying a skeleton loading state.

On this page

When To UseExamplesPropsSidebar