Sidebar
Collapsible sidebar navigation component with a built-in toggle button. Supports controlled and uncontrolled modes, configurable widths, and smooth transition animations.
Uncontrolled Sidebar
Preview
Click the arrow to collapse
Controlled Sidebar
Preview
Main content area
Default Collapsed
Preview
Starts collapsed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| collapsed | boolean | - | Controlled collapsed state. When provided, the component becomes fully controlled. |
| defaultCollapsed | boolean | false | Initial collapsed state for uncontrolled usage. |
| onCollapsedChange | (collapsed: boolean) => void | - | Callback fired when the collapsed state changes. |
| width | string | "260px" | Width of the sidebar when expanded. |
| collapsedWidth | string | "60px" | Width of the sidebar when collapsed. |
| children | ReactNode | - | Sidebar content, typically navigation links or menu items. |
| className | string | - | Additional CSS classes for the aside element. |
Accessibility
- Renders as a semantic
<aside>element. - The toggle button includes an
aria-labelthat updates based on the collapsed state ("Expand sidebar" / "Collapse sidebar"). - The
data-collapsedattribute is set on the aside element for CSS-based styling hooks. - Navigation links inside the sidebar should use proper anchor tags or accessible link components.
- The transition uses CSS
transition-allfor smooth width changes.