Sidebar API

API reference for the Sidebar component: its props with their token values and defaults, the styled-system prop groups, and forwarded HTML attributes.

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`	-	Whether item labels are shown. Controlled.
`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`.
`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.