Sidebar

A collapsible vertical icon rail. Collapsed, it shows icon-only SidebarItems; open, each item's label appears next to its icon - rendered away from the anchored edge (a right-anchored rail shows...

Source

Demos

For usage examples, visit the component demo page: Sidebar

Import

import { Sidebar } from '@soroush.tech/design-system/Sidebar'

Props

Also accepts every Flex prop (bg, spacing, layout, ...).

Prop	Type	Default	Description
`children`	`ReactNode`	-	Rail contents - items and any other nodes.
`isOpen`	`boolean`	`false`	Whether item labels are shown. Controlled. A `stacked` rail always shows them.
`layout`	`'inline' \| 'stacked'`	`'inline'`	`inline` is the collapsible icon rail; `stacked` puts each label under its icon, always shown.
`stackedWidth`	`string`	`'5.5rem'`	Rail width of a `stacked` layout.
`panel`	`ReactNode`	-	The panel column's content, rendered in place (server-rendered). Takes the place of `hasPanel`.
`anchor`	`'left' \| 'right'`	`'left'`	Screen edge the rail hugs - labels render away from it.
`variant`	`'text' \| 'outlined' \| 'plain'`	`'text'`	Default variant for every item - an item's own `variant` wins.
`expandedWidth`	`string`	`'14rem'`	Rail width while open.
`collapsedWidth`	`string`	`'3.5rem'`	Rail width while collapsed (icons only).
`hasPanel`	`boolean`	`false`	Render the selected item's `children` in a second column.
`panelWidth`	`string`	`'18rem'`	Width of the panel column. Only meaningful with `hasPanel` or `panel`.
`panelProps`	`Omit<FlexProps, 'children'\|'id'> & { as?: ElementType }`	-	Props for the panel column - any `Flex` prop, plus `as`.
`aria-label`	`string`	-	Required accessible name of the `<nav>` landmark.

Theming

Slot	Element
`root`	The `<nav>` landmark wrapping the rail and, when shown, the panel.
`rail`	The animating icon column.
`panel`	The `<section>` column shown by `hasPanel`.

The root holds no width of its own - it is sized by its contents, which is what lets bg and the other Flex props cover the panel as well as the rail rather than stopping at the rail's edge. The width animation lives on rail, runs 200ms, and honors prefers-reduced-motion.

Customize via theme.components.Sidebar.styleOverrides.

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.