Sidebar

navigation

Vertical navigation sidebar with sectioned links, active state (aria-current=page), optional icons, section labels, and brand header. Token-driven width, colors, and spacing.

Import

typescript
import { Sidebar } from "packages/ui/src";

Props

SidebarProps

PropTypeRequired
headerstringNo
sectionsSidebarSection[]Yes
classNamestringNo

Examples

Platform Navigation

Content area

Minimal (no sections)

Metadata

Component Metadata
Familynavigation
FrameworksNext.js, Astro/EmDash
DescriptionVertical navigation sidebar with sectioned links, active state (aria-current=page), optional icons, section labels, and brand header. Token-driven width, colors, and spacing.
PropsSidebarProps (header?: string, sections: SidebarSection[], className?: string)
Statesdefault, with-header, with-sections, active-link
A11y
  • role=navigation with aria-label
  • aria-current=page on active link
  • Icon containers are aria-hidden
  • Semantic list structure (ul/li)
Responsive
  • Fixed width from token
  • Full height within container
Motion
  • Link hover color and background transition
Token Dependencies
  • components.sidebar.background
  • components.sidebar.borderColor
  • components.sidebar.width
  • components.sidebar.padding
  • components.sidebar.headerColor
  • components.sidebar.headerFontSize
  • components.sidebar.linkColor
  • components.sidebar.linkHoverColor
  • components.sidebar.linkHoverBackground
  • components.sidebar.linkActiveColor
  • components.sidebar.linkActiveBackground
  • components.sidebar.linkPadding
  • components.sidebar.linkBorderRadius
  • components.sidebar.linkFontSize
  • components.sidebar.sectionGap
  • components.sidebar.sectionLabelColor
  • components.sidebar.sectionLabelFontSize
Content Slotsheader (string), sections (SidebarSection[]), link icons (ReactNode)
CMS Bindings
  • Navigation structure from CMS
  • Active state from current route
Test Cases
  • Renders navigation
  • Renders header when provided
  • Renders section labels
  • Renders all links
  • Active link has aria-current=page
  • Inactive link has no aria-current
  • Has aria-label for navigation
  • Passes className through