Sidebar

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The Sidebar component provides a flexible navigation panel that can slide in from any direction. Built with accessibility and responsive design in mind, it supports fixed and collapsible modes, multiple directions, and customizable content areas. Perfect for navigation menus, filters, settings panels, and any interface requiring additional space.

Basic Usage

View in Storybook

Navigation

© 2024 My App

Different Directions

Left Sidebar

This sidebar slides in from the left side.

Right Sidebar

This sidebar slides in from the right side.

Top Sidebar

This sidebar slides in from the top side.

Bottom Sidebar

This sidebar slides in from the bottom side.

Navigation Menu

My Application

Current page: dashboard

MA

My App

JD

John Doe

john@example.com

Filter Panel

Product Catalog

Product 1

Product 2

Product 3

Product 4

Product 5

Product 6

Filters

CategoryAll CategoriesElectronicsClothingBooksHome & GardenSports

Price Range: $0 - $1000

In Stock Only

Minimum Rating

5 stars & up4 stars & up3 stars & up2 stars & up1 star & up

Block Click Outside

Note: This sidebar has `blockClickOutSide=true`, so clicking outside won't close it. You must use the close button.

Modal Sidebar

This sidebar blocks click outside events. You must explicitly close it using the close button or programmatically.

This is useful for modal-like sidebars where you want to ensure the user completes an action before closing.

Properties

Sidebar

Property	Type	Default	Description
fixed	boolean	-	Whether the sidebar is fixed (always visible) or collapsible.
isOpen	boolean	-	Controlled open state of the sidebar.
onToggle	(open: boolean) => void	-	Callback fired when the sidebar open state changes.
children	ReactNode	-	Sidebar content.
className	string	-	Additional CSS classes for the sidebar.
direction	'top' | 'bottom' | 'left' | 'right' | 'full'	'left'	Direction from which the sidebar slides in.
blockClickOutSide	boolean	false	Whether to prevent closing when clicking outside.

SidebarHeader

Property	Type	Description
children	ReactNode	Header content (title, close button, etc.).
className	string	Additional CSS classes for the header.

SidebarBody

Property	Type	Description
children	ReactNode	Main body content.
className	string	Additional CSS classes for the body.

SidebarNav

Property	Type	Description
children	ReactNode	Navigation content (typically SidebarList).
className	string	Additional CSS classes for the nav.

SidebarList

Property	Type	Description
children	ReactNode	List items (SidebarListItem components).
className	string	Additional CSS classes for the list.

SidebarListItem

Property	Type	Description
children	ReactNode	List item content.
className	string	Additional CSS classes for the item.
onClick	() => void	Click handler for the item.

SidebarFooter

Property	Type	Description
children	ReactNode	Footer content.
className	string	Additional CSS classes for the footer.

Direction Behavior

Direction	Slide Animation	Default Size	Use Case
left	Slides from left edge	288px width	Primary navigation, menu
right	Slides from right edge	288px width	Filters, settings, details
top	Slides from top edge	288px height	Notifications, search
bottom	Slides from bottom edge	288px height	Actions, mobile menus
full	Slides from top-left	Full screen	Modal-like overlays

Accessibility

The Sidebar component includes comprehensive accessibility features:

• Keyboard Navigation - Escape key to close, Tab navigation within sidebar
• Focus Management - Automatic focus restoration when closed
• Screen Reader Support - Proper ARIA attributes and hidden states
• Semantic HTML - Uses proper nav, header, and footer elements
• Click Outside - Configurable click-outside-to-close behavior
• ARIA Labels - Descriptive labels for all interactive elements

Common Use Cases

The Sidebar component is perfect for:

• Navigation Menus - Primary and secondary navigation systems
• Filter Panels - Advanced filtering and search interfaces
• Settings Panels - Application preferences and configuration
• User Profiles - Profile information and account management
• Shopping Carts - E-commerce cart and checkout flows
• Notifications - System notifications and alerts
• Help & Support - Documentation and help content
• Mobile Menus - Responsive navigation for mobile devices

Best Practices

1. Appropriate Direction - Choose the direction that makes sense for your layout
2. Clear Purpose - Use descriptive headers to indicate sidebar purpose
3. Consistent Behavior - Maintain consistent sidebar behavior across your app
4. Mobile Optimization - Ensure sidebars work well on mobile devices
5. Performance - Avoid heavy content that might cause layout shifts
6. Accessibility - Test with screen readers and keyboard navigation
7. Visual Hierarchy - Use proper spacing and typography in sidebar content
8. State Management - Handle sidebar state consistently across components