Sidebar

Sidebar gives an app its primary navigation: a named nav of labelled sections, links with a current state, and collapsible groups. It has one root hook, part hooks, and no JavaScript.

Public web API

A <nav> with section lists, links, and <details> groups. Mark the current link with aria-current="page".

<nav data-bitsy-sidebar aria-label="Main">
  <div data-bitsy-sidebar-section>
    <h2 data-bitsy-sidebar-heading id="nav-workspace">Workspace</h2>
    <ul aria-labelledby="nav-workspace">
      <li><a data-bitsy-sidebar-link href="/"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 11l9-8 9 8M5 10v10h14V10" /></svg>Home</a></li>
      <li>
        <a data-bitsy-sidebar-link href="/inbox"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16v14H4zM4 14h5l1 2h4l1-2h5" /></svg>Inbox
          <span data-bitsy-sidebar-meta>3<span class="u-visually-hidden"> unread</span></span></a>
      </li>
      <li>
        <details data-bitsy-sidebar-group open>
          <summary>Projects</summary>
          <ul>
            <li><a data-bitsy-sidebar-link href="/projects/atlas" aria-current="page">Atlas</a></li>
            <li><a data-bitsy-sidebar-link href="/projects/beacon">Beacon</a></li>
          </ul>
        </details>
      </li>
    </ul>
  </div>
</nav>

Open a group that holds the current page with open.
Give counts hidden text, such as "unread".
The app shell places the Sidebar. Set its width with --bitsy-sidebar-width.

Header, footer, and scrolling

The header and footer stick while a long middle scrolls.

<nav data-bitsy-sidebar aria-label="App">
  <div data-bitsy-sidebar-header><strong>Acme</strong></div>
  <div data-bitsy-sidebar-section>
    <h2 data-bitsy-sidebar-heading id="nav-manage">Manage</h2>
    <ul aria-labelledby="nav-manage">
      <li><a data-bitsy-sidebar-link href="/team" aria-current="page">Team</a></li>
      <li><a data-bitsy-sidebar-link href="/billing">Billing</a></li>
    </ul>
  </div>
  <div data-bitsy-sidebar-footer>
    <a data-bitsy-sidebar-link href="/settings">Settings</a>
  </div>
</nav>

Foundation versus Bit

The foundation styles lists, links, and details panels, but not full-width nav rows with icons, counts, a current state, section labels, and collapsible groups. data-bitsy-sidebar adds those, ships no JavaScript, and defines only --bitsy-sidebar-* hooks.