Sidebar Navigation
Vertical navigation sidebar with collapsible sections, icon rail, badge indicators, and active state. Covers full sidebar, collapsed icon rail, grouped sections, and scrollable overflow.
1. Full Sidebar — Icon + Label
Standard vertical nav with icon, label, active state indicator, and optional badge. The active item uses a 3px left-border rule instead of a filled background to keep the sidebar visually lightweight.
Select a nav item to see active state.
2. Icon-Only Collapsed Rail
Compact 56px-wide rail showing icons only. Hover reveals a tooltip with the label. Used when horizontal space is constrained or alongside a collapsible full sidebar.
Hover icons to see label tooltips.
3. Toggle: Full ↔ Collapsed Rail
User-controlled collapse. Alpine toggles between the two widths; CSS transitions handle the animation. The label and badge are hidden in rail mode via x-show.
Click the arrow button to toggle sidebar width.
4. Grouped Sections — Collapsible
Groups divide the sidebar into named sections. Each group header is clickable to collapse its items. Alpine tracks open state per group with an object key.
Click group headings to expand / collapse. "Reports" starts collapsed.
5. Scrollable Overflow
When the item count exceeds the sidebar height, the nav area scrolls independently. The header (logo/brand) and footer (user profile) stay pinned outside the scroll area.
The nav scrolls independently while header and footer stay pinned.
6. States
Individual item states that every sidebar implementation must handle.
Default
Active (current page)
With badge count
With alert badge
Disabled
Label-only (no icon)
7. Edge Cases
Real-world inputs that break naive sidebar implementations.
Very long label — must truncate, not wrap
Empty state — zero items
Loading skeleton