Sidebar
Main dashboard navigation. A floating glass card by default; collapses to an icon rail.
Usage
import { Sidebar } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- Main navigation of a web app with five or more sections.
When not to use
- On phones. Use Dock.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { title?, items: { key, label, icon, count? }[] }[] | required | |
selectedKey | string | required | |
onSelect | (key) => void | - | |
variant | 'floating' | 'inset' | 'floating' | |
isCollapsed | boolean | false | Shows the icon rail. |
header, footer | ReactNode | - |
Accessibility
- The active item is marked as the current page, and by more than color.