edbnedbn/ui
ComponentsMapsPDF
GitHub stars
Explorer
Get Started
Components

Sidebar

Responsive sidebar with collapsible sections, menu items, groups, and mobile support.

Components

Installation

npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/sidebar.json

Manual

API Reference

SidebarProvider

Provides sidebar state context. Renders a div element.

defaultOpenboolean
=true

Initial open state

openboolean

Controlled open state

onOpenChangefunction

Called when state changes

classNamestring

CSS class name

Sidebar

The sidebar container. Renders a div element.

side'left' | 'right'
='left'

Which side to display on

variantstring

Sidebar visual variant

collapsible'offcanvas' | 'icon' | 'none'
='offcanvas'

Collapse behavior

classNamestring

CSS class name

SidebarContent

Scrollable main content area. Renders a div element.

classNamestring

CSS class name

SidebarGroup

Groups related sidebar items. Renders a div element.

classNamestring

CSS class name

SidebarGroupLabel

Label for a sidebar group. Renders a div element.

asChildboolean
=false

Merge props into child element

classNamestring

CSS class name

SidebarMenu

List of menu items. Renders a ul element.

classNamestring

CSS class name

SidebarMenuItem

A single menu item. Renders a li element.

classNamestring

CSS class name

SidebarMenuButton

Interactive button within a menu item. Renders a button element.

asChildboolean
=false

Merge props into child element

isActiveboolean
=false

Mark as active item

variant'default' | 'outline'
='default'

Button variant

size'sm' | 'default' | 'lg'
='default'

Button size

tooltipstring | TooltipContentProps

Tooltip when sidebar is collapsed

classNamestring

CSS class name

SidebarHeader

Top area of the sidebar. Renders a div element.

classNamestring

CSS class name

SidebarFooter

Bottom area of the sidebar. Renders a div element.

classNamestring

CSS class name

SidebarRail

Thin toggle rail at the sidebar edge. Renders a button element.

classNamestring

CSS class name