Sidebar
A full-featured collapsible sidebar with compound components, mobile Sheet support, nested items, search filtering, badges, and multiple visual variants.
Installation
$ npx shadcn@latest add @orecus/sidebarDependencies:
motionlucide-react
Registry:
sheetinput-groupbuttonseparator@orecus/enhanced-button@orecus/card@orecus/color-utils
Component
Glass Types
The type prop controls the glass effect intensity
Normal Glass
Inverted Glass
Layout Variants
The variant prop controls positioning and styling
Floating
Inline
Fixed
Border Radius
The radius prop controls corner rounding
Border
The border prop shows/hides the border
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'floating' | 'fixed' | 'inline' | 'floating' | Visual style variant |
type | 'normal' | 'subtle' | 'strong' | 'solid' | 'none' | 'normal' | Glass type for styling |
invert | boolean | false | Invert glass overlay (white-on-light, dark-on-dark) |
radius | 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | Border radius size |
border | boolean | true | Show border around sidebar (variant-aware: all sides for floating, right side only for fixed/inline) |
collapsible | boolean | false | Enable collapse to icons mode |
defaultCollapsed | boolean | false | Initial collapsed state |
collapsed | boolean | — | Controlled collapsed state |
onCollapsedChange | (collapsed: boolean) => void | — | Callback when collapsed state changes |
mobileBreakpoint | 'sm' | 'md' | 'lg' | 'lg' | When to show mobile drawer |
width | number | 256 | Width in pixels |
collapsedWidth | number | 64 | Width when collapsed |
activePath | string | — | Current active path for highlighting |
activeStyle | 'background' | 'accentBar' | 'underline' | 'text' | 'background' | Active item styling variant |
accentColor | ThemeColor | 'primary' | Accent color for active items |
accentPosition | 'left' | 'right' | 'left' | Position of accent bar |
hoverEffect | 'none' | 'scale' | 'glow' | 'scale-glow' | 'translate' | 'none' | Hover animation effect for items |
className | string | — | Additional CSS classes |
Compound Components
Sidebar.Header
The header container.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Header content |
className | string | — | Additional CSS classes |
Sidebar.Content
The scrollable content area.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Sidebar items and groups |
className | string | — | Additional CSS classes |
Sidebar.Footer
The footer container.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Footer content |
className | string | — | Additional CSS classes |
Sidebar.Group
A grouping of sidebar items with optional borders and collapse behavior.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Group title |
icon | LucideIcon | ReactNode | — | Group icon |
collapsible | boolean | — | Whether group can be collapsed |
defaultOpen | boolean | true | Initial open state for collapsible groups |
showItemBorder | boolean | false | Show left border on items within the group (like nested SubItems have) |
showGroupBorder | boolean | true | Show bottom border below the group header |
children | ReactNode | — | Sidebar items |
className | string | — | Additional CSS classes |
Sidebar.Item
An interactive sidebar item.
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | — | Navigation link URL |
children | ReactNode | — | Item content (Label, Icon, Action) |
active | boolean | — | Active state |
disabled | boolean | — | Disabled state |
Sidebar.Label
Animated text label for an item.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Label text |
Sidebar.Icon
Icon wrapper for an item.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Icon element |
Sidebar.Action
Trailing action for an item.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Action element |
Sidebar.SubItems
Container for nested sub-items with optional left border.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Sub-item elements |
showItemBorder | boolean | true | Show left border on sub-items |
className | string | — | Additional CSS classes |
Sidebar.Separator
A visual divider between groups or sections.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes |