Sidebar

Боковая панель. Бесплатно, MIT · Навигация и каркас › Каркас

Установка

npx valyro-cli@latest add sidebar

npx shadcn@latest add https://valyro.xyz/r/sidebar.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Sidebar } from 'valyro-ui';

Prop	Type	Default
`sections`	`SidebarSection[]`		Groups of nav items, each with an optional heading (a divider in collapsed mode). Or compose them as children: `Sidebar.Section` with `Sidebar.Item`s (nested Items make a collapsible group).
`children`	`ReactNode`		The compound form instead of `sections`: `Sidebar.Section` elements.
`value`	`string`		Id of the active item.
`defaultValue`	`string`		Initial `value` when uncontrolled.
`onValueChange`	`(id: string) => void`		Called with the new `value` when it changes.
`collapsed`	`boolean`	`false`	Icons-only rail; labels move into tooltips and groups into flyout menus.
`header`	`ReactNode`		Fixed slot above the navigation, e.g. a logo or workspace switcher.
`footer`	`ReactNode`		Fixed slot below the navigation, e.g. the user menu.
`label`	`string`	`'Sidebar'`	Accessible name of the navigation.

Sidebar.Section (SidebarSectionPart), Sidebar.Item (SidebarItemPart)