Sidebar

Vertical navigation panel using semantic <aside>. State controlled via data-open.

Basic Sidebar

<aside class="sidebar" aria-label="Section navigation">
  <nav>
    <ul class="tree">
      <li><a href="/dashboard" aria-current="page">Dashboard</a></li>
      <li><a href="/projects">Projects</a></li>
      <li><a href="/settings">Settings</a></li>
    </ul>
  </nav>
</aside>

Hierarchical Sidebar (with Disclosure)

<aside class="sidebar" aria-label="System navigation">
  <nav>
    <ul class="tree">
      <li><a href="/dashboard" aria-current="page">Dashboard</a></li>
      <li>
        <details>
          <summary>System Settings</summary>
          <ul>
            <li><a href="/security">Security</a></li>
            <li><a href="/preferences">Preferences</a></li>
          </ul>
        </details>
      </li>
    </ul>
  </nav>
</aside>

Collapsible on Mobile

<button type="button"
        aria-expanded="false"
        aria-controls="sidebar">
  Open Sidebar
</button>

<aside class="sidebar" id="sidebar" data-open="false">
  <nav>...</nav>
</aside>

Semantic Structure

Element	Role
`aside.sidebar`	Complementary navigation landmark
`nav`	Navigation region inside aside
`aria-label`	Distinguishes from other `<aside>` elements
`aria-current="page"`	Marks the active link
`data-open`	Controls visibility on mobile

Accessibility

<aside> creates a complementary landmark — screen readers can jump to it
Add aria-label to distinguish multiple asides on the same page
Use aria-current="page" on the active link — not a class
Toggle button needs aria-expanded to reflect sidebar state

Features

Semantic Structure - Built with native HTML5 elements for maximum reliability.
Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
Fully Responsive - Scales perfectly from mobile to desktop screens.
No JS Dependency - Core functionality relies on pure CSS for maximum performance.
Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Sidebar component is designed for versatile implementation across modern web applications. Ideal scenarios include:

Dashboards & Admin Panels - Structured data presentation and interface control.
Content Management Systems - Organizing complex information hierarchies and media.
E-Commerce Platforms - Enhancing product discovery and user workflows.
Marketing Sites - Highlighting key product offerings cleanly and effectively.
SaaS Applications - Delivering native-feeling, responsive app experiences.