An icon-only navigation rail: one selection marker slides between destinations, with flyout labels, badges, a live-status orb and brand/footer slots.
Sliding markerBadgeLive statusHover label
<SidebarRail {items} bind:active label="Workspace" onnavigate={go} />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { SidebarRail } from '@chanrg/4ui';<SidebarRail {items} bind:active label="Workspace" onnavigate={go} />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { id, label, icon, href?, badge? }[] | [] | Rail entries; href renders links. |
active | string | null ($bindable) | null | Selected item id. No match hides the marker. |
status | { live, label } | — | Connection orb above the footer. |
brand / footer | Snippet | — | Top logo and bottom cluster slots. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Every icon item carries an aria-label and the active one aria-current.
- Flyout labels appear on keyboard focus, not only hover.
- The destinations are one tab stop; Up/Down, Home and End move between them.
- The status orb is a role="status" region labelled with its own text.