Sidebar

Sidebar navigation provides vertical navigation typically used in application shells. These patterns use semantic <nav> elements with <icon-wc> for visual icons.

VB's native <nav> styles provide CSS variables for link colors, hover, and active states — so sidebar patterns only need to set variables and add layout-specific rules like display: flex and gap.

Key features:

• Semantic HTML with proper ARIA attributes
• Active page indication via aria-current="page"
• Icons from Lucide set via <icon-wc>
• Grouped sections with headings for organization
• Collapsible sections using native <details>/<summary> — VB automatically resets borders and padding for <details> inside <nav>

A basic vertical navigation with icon-labeled links. Uses aria-current="page" to indicate the active page.

Navigation organized into labeled sections using headings. Each section has its own <nav> element with a descriptive aria-label for accessibility.

Section headings use uppercase text with muted color to visually separate groups:

Navigation with expandable/collapsible groups using native <details>/<summary> elements. No JavaScript required — the browser handles the toggle behavior and VB provides the chevron indicator automatically via summary::after.

VB's base nav styles reset <details> borders and content padding inside <nav>, so collapsible sidebar sections only need minimal summary styling.

VB handles the chevron indicator and border reset natively. You only need to style the summary text appearance and hover state:

These base styles are shared across all sidebar variants. Instead of writing custom :hover and [aria-current] rules, set VB's nav CSS variables and the base nav handles the rest:

Sidebar navigation is composed from layout primitives. Here are the key styling considerations:

• Accessibility: Always use aria-label on <nav> elements to identify their purpose
• Active state: Use aria-current="page" on the link representing the current page
• Multiple navs: When using grouped sections, give each <nav> a unique aria-label
• Icons: Ensure icons have sufficient contrast and are paired with text labels
• Width: Keep sidebar width between 200-280px for optimal readability
• Collapsible state: Use open attribute on <details> to set initial expanded state