Components / Layout
Sidebar
Vertical navigation with headings, groups, badges, per-item shortcut tooltips, custom icons and attrs, and an icon-only collapsed mode. Extra attributes go to the nav element.
@ruckc/truss-ui Layout
Import
import { Sidebar } from '@ruckc/truss-ui';Playground
active
API
Extra attributes (`data-testid`, `title`, ...) spread onto the item's link or button.
| Prop | Type | Default | Description |
|---|---|---|---|
items required | (| { heading: string } | { id: string; label: string; icon?: IconSource; href?: string; badge?: string | number; shortcut?: string; attrs?: Record<string, string>; children?: { id: string; label: string; href?: string; attrs?: Record<string, string> }[]; })[] | — | A built-in glyph name, a `{ path, viewBox? }` definition or a snippet. A key combination (`mod+k`, `g h`; a sequence is not exposed as aria-keyshortcuts) shown in a tooltip beside the label (expanded and collapsed), never inline, and exposed as `aria-keyshortcuts`. Display only: bind the key with `registerCommand` or `hotkeys`. Extra attributes (`data-testid`, `title`, ...) spread onto the item's link or button. |
active bindable | string | — | The active item. Bind it with `bind:active`. |
collapsed bindable | boolean | false | Whether it is collapsed to its compact form. Bind it with `bind:collapsed`. |
label | string | 'Primary' | Visible label shown above the control. |