The vertical rail for product areas, with grouping and collapse.
| Prop | Type | Notes |
|---|---|---|
| collapsed / onCollapse | boolean / (v) => void | Toggles the 236 ↔ 64px rail |
| variant | rounded · square · floating | Rounded card, flush edge, or a lifted floating rail |
| icons / logo | boolean | Show or hide item icons and the brand lockup |
| Item.children | Item[] | Nested tree items that expand in place |
| Item.icon / active | ReactNode / boolean | Glyph and current-page state |
| Item.badge | number | Count pill, hidden when collapsed |
| Section.label | string | Mono group heading |
| collapsed tooltips | — | Labels surface on hover of icon items |
The rail carries persistent product areas. For global actions and account use the Top Navigation; for a jump-anywhere search use the Command Menu.
Keep one active item, marked with the warm inset bar.
Don't highlight two items. Only the current area is active.
When collapsed, keep icons and surface labels on hover.
Don't list a dozen flat items. Group them under sections.
The rail plus a content region — the classic app shell.
Icons-only on smaller screens or to reclaim width.
Section labels split large products into areas.
| Token | Value | Role |
|---|---|---|
| --snav-w | 236px | Expanded rail width |
| --snav-w-collapsed | 64px | Icons-only width |
| --snav-ease | .24s | Collapse transition |
| --snav-active | 2px #FF7A00 inset | Current-item marker |
| --snav-item | #9AA0A8 | Idle item colour |
| --snav-label | mono · #565A62 | Section heading |
<nav class="o-snav" aria-label="Primary"> <div class="o-snav__brand"><Logo /> Optimistic</div> <div class="o-snav__label">Workspace</div> <a class="o-snav__item is-active" aria-current="page"><HomeIcon /> Overview</a> <a class="o-snav__item"><GridIcon /> Projects <span class="o-badge">3</span></a> </nav>