ax-nav — 4 modes,
8 accent presets.
Navigation component extracted from production ax-nav-*.component.ts.
Switch between Rail / Expanded / Dock / Top Nav layouts and preview all 8 colour presets live.
Values drive --ax-nav-* CSS custom properties on the shell element.
01Live demo
Switch modes and accent colors. Click any module to toggle active state.
Nav Color:
02CSS token spec
CSS custom properties set by ax-nav-shell on the host element.
Shell CSS variables
| Variable | Slate (default) | Description |
|---|---|---|
--ax-nav-bg | #0f172a | Rail / topbar background |
--ax-nav-text-on-dark | #fff | Text on dark nav |
--ax-nav-icon-default | #94a3b8 | Inactive icon |
--ax-nav-icon-hover | #cbd5e1 | Hovered icon |
--ax-nav-icon-active | #3b82f6 | Active module icon |
--ax-nav-btn-hover | rgba(148,163,184,0.12) | Button hover bg |
--ax-nav-btn-active | rgba(59,130,246,0.2) | Active button bg |
--ax-nav-divider | rgba(148,163,184,0.15) | Divider lines |
Layout dimensions
| Property | Value | Source |
|---|---|---|
| Rail width | 80px | ax-nav-rail |
| Expanded panel | 240px | ax-nav-expanded-panel |
| Topbar height | 64px | ax-nav-topbar |
| Button size | 46 x 46px | --ax-nav-btn-size |
| Button radius | 10px | --ax-nav-btn-radius |
| Icon size | 22 x 22px | ax-nav-item |
| Active bar | 3 x 28px, radius 0 6px 6px 0 | ax-nav-active-bar |
| Avatar | 38px, radius 14px | ax-nav-avatar |
| Dock border-radius | 12px | ax-nav-rail --dock |
| Dock backdrop-filter | blur(20px) saturate(1.4) | ax-nav-rail --dock |
03Accent presets
Eight preset palettes from NAV_ACCENTS. Click any preset in the live demo above to apply.
| Name | Background | Icon Default | Icon Active | Divider |
|---|