Sidebar

Side navigation panel. Free, MIT · Navigation and layout › Structure

Installation

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)

App Shell — Application frame
Navbar — Top navigation bar
Resizable Panels — Panels with draggable dividers
Breadcrumbs — Breadcrumb trail
Tabs — Tabs
Segmented Control — Mode switcher
Pagination — Page navigation
Stepper — Step-by-step progress
Dropdown Menu — Dropdown menu
Context Menu — Right-click menu
Command Palette — ⌘K-style command menu
Keyboard Map Overlay — Keyboard shortcut map for a screen: search, keyboard view and practice mode