Subnav – Tsunami

Beside a sidebar that stays collapsed

A settings page with many sections: the main sidebar collapses to icons (data-collapsed="true") and the subnav lists the sections. The element after .subnav is the content and gets padding. Below 48rem the subnav sits above the content.

<div>
  <aside class="sidebar" data-collapsed="true" style="height: 26rem">
    <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>Home</span></a></li>
            <li><a href="#"><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>
        </div>
        <hr />
        <div role="group">
          <ul>
            <li><a href="#" aria-current="page"><i class="icon icon-settings" aria-hidden="true"></i><span>Settings</span></a></li>
          </ul>
        </div>
      </section>
    </nav>
  </aside>
  <div>
    <nav class="subnav" aria-label="Store settings">
      <h2>Store settings</h2>
      <ul>
        <li><a href="#"><i class="icon icon-sliders-horizontal" aria-hidden="true"></i><span>General</span></a></li>
        <li><a href="#" aria-current="page"><i class="icon icon-globe" aria-hidden="true"></i><span>Markets</span></a></li>
        <li><a href="#"><i class="icon icon-credit-card" aria-hidden="true"></i><span>Payments</span></a></li>
        <li><a href="#"><i class="icon icon-truck" aria-hidden="true"></i><span>Fulfillment</span></a></li>
        <li><a href="#"><i class="icon icon-link-2" aria-hidden="true"></i><span>Domains</span></a></li>
        <li><a href="#"><i class="icon icon-users" aria-hidden="true"></i><span>Users &amp; permissions</span></a></li>
      </ul>
    </nav>
    <div>
      <header class="page-header"><div><h1>Markets</h1><p>Countries and currencies the store sells in.</p></div></header>
    </div>
  </div>
</div>

Attributes

Attribute / element	Values	Description
`.subnav`	`nav`	Section menu, 13rem wide. Add an `aria-label`.
`h2`	child	Section title, medium weight
`ul > li > a`	child	Link: `.icon` + label in a `span` (bare `a` without a `ul` also works)
`aria-current`	`page`	On `a`: the open section
`.subnav + *`	next element	Content: fills the remaining space, with padding. From 48rem the parent lays out in a row with a divider on the right. Below that they stack with a divider underneath.
`.sidebar[data-collapsed="true"]`	beside	Main sidebar collapsed to icons. See the Sidebar page.