Collapsible Sidebar
NewPro
An app sidebar that collapses to an icon rail: labels fade, tooltips take over and nested groups open in a flyout.
Customize
Start collapsed
240px
68px
#ff784f
When to use it
- The main navigation of a dashboard or admin panel
- Editors and tools where the canvas needs all the width it can get
- Internal apps with nested sections such as projects and reports
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 628
Installation
Collapsible Sidebar is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy collapsible-sidebar.tsx into components/ui and run npm install motion.
Usage
import { CollapsibleSidebar } from "@/components/ui/collapsible-sidebar";
<CollapsibleSidebar
defaultActiveId="home"
sections={[
{
title: "Workspace",
items: [
{ id: "home", label: "Dashboard", icon: <HomeIcon />, href: "/" },
{ id: "projects", label: "Projects", icon: <FolderIcon />, children: [{ id: "web", label: "Website" }] },
],
},
]}
/>Props
16 properties| Property | Type | Default | Description |
|---|---|---|---|
| sections | SidebarSection[] | — | Groups of items: { id?, title?, items }. Items: { id, label, icon?, href?, badge?, disabled?, onSelect?, children? }, with one level of children. |
| collapsed | boolean | — | Collapsed state, for controlled use. |
| defaultCollapsed | boolean | false | Collapsed state when uncontrolled. |
| onCollapsedChange | (collapsed: boolean) => void | — | Called when the sidebar is toggled. |
| activeId | string | — | Active item id, for controlled use. |
| defaultActiveId | string | — | Active item id when uncontrolled. |
| onSelect | (item: SidebarItem) => void | — | Called with any chosen item, after its own onSelect. |
| width | number | 256 | Open width in pixels. |
| railWidth | number | 68 | Rail width in pixels. |
| brand | SidebarSlot | — | Top row that keeps its icon on the rail: { icon, title, subtitle?, onClick?, label? }. |
| footer | SidebarSlot | — | Bottom row with the same shape, such as the signed-in user. |
| color | string | "#ff784f" | Color of the active item. |
| hotkey | string | false | "b" | Letter pressed with Cmd or Ctrl to toggle. False turns the shortcut off. |
| linkAs | ElementType | — | Component used for items with href, such as a framework Link. |
| label | string | "Main" | Accessible name of the navigation. |
| className | string | — | Extra classes for the sidebar. |
Dependencies: motion