Sidebar
Navigation sidebar component with support for nested items, collapsible sections, icons, and collapsed state. Ideal for application layouts.
Basic Sidebar
Main Content Area
Content appears here alongside the sidebar navigation.
With Sections
Organized Navigation
Sections group related navigation items. Some sections are collapsible and can start collapsed.
Nested Navigation
Hierarchical Navigation
Click parent items to expand/collapse nested children. Great for complex navigation structures.
Collapsed State
Expanded (w-70)
Responsive Sidebar
Collapsed sidebar shows only icons. Hover over icons to see tooltips with labels.
Width Variants
Small (w-60)
Content area
Medium (w-70, Default)
Content area
Large (w-80)
Content area
Right Position
Main Content
Sidebar can be positioned on the right side. Border appears on the left instead of right.
Props
Sidebar
| Name | Type | Default | Description |
|---|---|---|---|
sections | SidebarSection[] | - | Array of sections with grouped items |
items | SidebarItem[] | - | Array of items (alternative to sections) |
collapsed | boolean | false | Whether sidebar is collapsed (shows icons only) |
onCollapse | (collapsed: boolean) => void | - | Callback when collapse state changes |
position | 'left' | 'right' | 'left' | Sidebar position |
width | 'sm' | 'md' | 'lg' | 'md' | Width of expanded sidebar |
className | string | - | Additional CSS classes |
SidebarItem Type
| Name | Type | Default | Description |
|---|---|---|---|
id* | string | - | Unique identifier for the item |
label* | string | - | Display text for the item |
href | string | - | Link destination (omit for parent items) |
icon | ReactNode | - | Icon to display before label |
active | boolean | - | Whether this is the current page |
children | SidebarItem[] | - | Nested child items |
SidebarSection Type
| Name | Type | Default | Description |
|---|---|---|---|
id* | string | - | Unique identifier for the section |
title | string | - | Section header title |
items* | SidebarItem[] | - | Items in this section |
collapsible | boolean | - | Whether section can be collapsed |
defaultCollapsed | boolean | - | Whether section starts collapsed |
Usage Guidelines
When to use
- •For primary navigation in web applications
- •When you have multiple navigation items that need persistent visibility
- •For hierarchical navigation with parent/child relationships
- •In dashboard layouts where navigation needs to be always accessible
Best practices
- •Use icons consistently across all navigation items
- •Keep navigation item labels short and descriptive
- •Group related items into sections for better organization
- •Mark the current page with the active state
- •Limit nesting to 2 levels to maintain simplicity
- •Use collapsed state on smaller screens to save space
Accessibility
- •ARIA role: navigation with aria-label
- •Semantic HTML: Uses aside and nav elements
- •Current page: Marked with aria-current="page"
- •Keyboard accessible: Tab and arrow key navigation
- •Focus indicators: Visible focus rings on all interactive elements
- •Collapsed state: Icons include title attribute for tooltips
Do's and Don'ts
✓ Do
- •Group related navigation items into sections
- •Use icons to help users quickly identify menu items
- •Highlight the current page with the active state
- •Keep navigation labels concise and clear
- •Provide a collapsed state for responsive layouts
Content
✗ Don't
- •Don't use long navigation labels that get truncated
- •Don't nest navigation more than 2 levels deep
- •Don't mix items with icons and items without icons
- •Don't forget to mark the current page as active
- •Don't use sidebar for temporary or contextual navigation
Content
Related Components
Tabs
For secondary navigation within a page
Breadcrumb
Show current location in hierarchy
Link
For standalone navigation links