Sidebar

An application rail that goes off-canvas on a phone.

Source: src/stylus/components/sidebar.styl

Default

A persistent rail beside the content on a wide screen; below 48rem it becomes an off-canvas panel that .sidebar-open slides in. The current entry is marked with aria-current="page", so the styling and the accessibility tree cannot disagree.

Content sits beside the rail.

<div class="sidebar-layout">
  <aside class="sidebar">
    <div class="sidebar-header"><strong>Acme</strong></div>
    <div class="sidebar-group-label">Workspace</div>
    <a class="sidebar-item" href="#sidebar" aria-current="page">Overview</a>
    <a class="sidebar-item" href="#sidebar">Components</a>
    <a class="sidebar-item" href="#sidebar">Settings</a>
    <div class="sidebar-footer"><span class="badge secondary">v2.0.2</span></div>
  </aside>
  <main class="sidebar-content"><p>Content sits beside the rail.</p></main>
</div>