Sidebar – Tsunami

Usage

The nav splits into header / section / footer. Each group is a [role="group"] with an h3 and a ul. Sub-links are a ul nested in an li. The footer button collapses or expands with command="--toggle-collapsed".

Page content

<div>
  <aside class="sidebar" id="sb-usage" style="height: 34rem">
    <nav aria-label="Main">
      <header>
        <a href="#"><span class="avatar" data-size="sm"><span>AS</span></span><span>Acme Store</span></a>
      </header>
      <section>
        <div role="group">
          <ul>
            <li><a href="#"><i class="icon icon-house" aria-hidden="true"></i><span>Dashboard</span></a></li>
          </ul>
        </div>
        <div role="group" aria-labelledby="sb-usage-sell">
          <h3 id="sb-usage-sell">Sell</h3>
          <ul>
            <li>
              <a href="#"><i class="icon icon-receipt" aria-hidden="true"></i><span>Orders</span></a>
              <ul>
                <li><a href="#"><span>Open carts</span></a></li>
              </ul>
            </li>
            <li><a href="#"><i class="icon icon-users" aria-hidden="true"></i><span>Customers</span></a></li>
            <li><a href="#"><i class="icon icon-repeat" aria-hidden="true"></i><span>Subscriptions</span><span class="badge">New</span></a></li>
          </ul>
        </div>
        <div role="group" aria-labelledby="sb-usage-catalog">
          <h3 id="sb-usage-catalog">Catalog</h3>
          <ul>
            <li>
              <a href="#" aria-current="page"><i class="icon icon-package" aria-hidden="true"></i><span>Products</span></a>
              <ul>
                <li><a href="#"><span>Categories</span></a></li>
                <li><a href="#"><span>Inventory</span></a></li>
              </ul>
            </li>
            <li><a href="#"><i class="icon icon-tag" aria-hidden="true"></i><span>Offers</span></a></li>
          </ul>
        </div>
        <hr />
        <div role="group">
          <ul>
            <li><a href="#"><i class="icon icon-settings" aria-hidden="true"></i><span>Settings</span></a></li>
          </ul>
        </div>
      </section>
      <footer>
        <button type="button" class="btn" data-variant="ghost" data-size="icon" commandfor="sb-usage" command="--toggle-collapsed" aria-label="Collapse or expand sidebar"><i class="icon icon-panel-left" aria-hidden="true"></i></button>
      </footer>
    </nav>
  </aside>
  <div class="empty">
    <p>Page content</p>
    <button type="button" class="btn" commandfor="sb-usage" command="--toggle-collapsed">Toggle</button>
  </div>
</div>

Collapsed to icons, with tooltips

data-collapsed="true" hides headings, sub-links and badges. The link label in its span becomes a tooltip on hover or focus, so every top-level link should have an icon. Pairs well with Subnav.

<aside class="sidebar" data-collapsed="true" style="height: 18rem">
  <nav aria-label="Main">
    <ul>
      <li><a href="#"><i class="icon icon-house" aria-hidden="true"></i><span>Home</span></a></li>
      <li><a href="#" aria-current="page"><i class="icon icon-package" aria-hidden="true"></i><span>Products</span></a></li>
      <li><a href="#"><i class="icon icon-shopping-bag" aria-hidden="true"></i><span>Orders</span></a></li>
      <li><a href="#"><i class="icon icon-user" aria-hidden="true"></i><span>Customers</span></a></li>
    </ul>
  </nav>
</aside>

API

Lives in js/sidebar.js. The sidebar fires no events of its own. Read the state from data-collapsed.

Function	Arguments	Description
`tsunami.sidebar.collapse(sidebar)`	`sidebar`: element `.sidebar`	Collapse to icons (sets `data-collapsed="true"`)
`tsunami.sidebar.expand(sidebar)`	`sidebar`: element	Back to full width (`data-collapsed="false"`)
`tsunami.sidebar.toggle(sidebar)`	`sidebar`: element	Toggle collapsed / expanded
`command="--toggle-collapsed"`	Button with `commandfor="sidebar-id"`	Toggle from a button anywhere, no JS needed. Also `--collapse` and `--expand`.

Attributes

Attribute / element	Values	Description
`.sidebar`	`aside`	15rem wide, full height, scrolls on its own. Sits in a row with the next element automatically.
`popover + id`	on `.sidebar`	Below 48rem it is a drawer opened by a `.sidebar-toggle[popovertarget]` button. From 48rem it is always shown.
`data-collapsed`	unset / `false` (default) full · `true` icons	Collapse to a 3.5rem icon column. Link labels become tooltips.
`nav`	child	Add an `aria-label`. Hold links and an `h2` directly, or split into header / section / footer.
`nav > header`	child	Top area, such as the store name with an `.avatar`
`nav > section`	child	Menu groups, spaced apart
`nav > footer`	child	Pinned to the bottom, such as the collapse button
`[role="group"]`	`div`	Link group. Add `aria-labelledby` pointing to the `h3`.
`h2, h3`	in `nav`	Group heading, small and gray
`ul > li > a`	in `nav`	Link: a 16px `.icon` or `img`, then the label in a `span`
`li > ul`	sub-links	Indented on a guide line. Hidden when collapsed.
`.badge`	in `a`	Trailing label such as New. Hidden when collapsed.
`hr`	in `section`	Divider between groups
`aria-current`	`page`	On `a`: the current page. Gray background, medium weight.