Sidebar
Vertical navigation sidebar with a header, footer, sections, links, dividers, and an optional collapse toggle.
Installation
npx dafink-ui add sidebarAlso installs: Tooltip, Scroll-fade
Demo
Composition
<Sidebar>
</Sidebar>
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | string | 'w-56' | Tailwind width class used when expanded. |
| collapsedWidth | string | 'w-16' | Tailwind width class used when collapsed. |
| collapsible | boolean | false | Renders the built-in expand/collapse toggle button. |
| collapsed | boolean | undefined | Controlled collapsed state. Omit to let Sidebar manage its own state. |
| defaultCollapsed | boolean | false | Initial collapsed state when uncontrolled. |
| onCollapsedChange | (collapsed: boolean) => void | undefined | Called whenever the toggle button changes the collapsed state. |
| togglePosition | 'top' | 'middle' | 'bottom' | 'middle' | Where the collapse toggle button sits along the right border. |
| className | string | '' | Additional CSS classes. |
| children | ReactNode | undefined | Sidebar content (header, sections, links, dividers, footer). |