Sidebar

A sidebar is a column next to the main content, for the navigation of a section, filters or related links. On a wide screen it stands beside the content; on a phone or tablet it slides in from the edge of the screen when asked for.

This page has one: the list of documentation pages on the right. Make the window narrower than 900px to see it turn into a button.

Layout

The sidebar is part of the page layout. Give the <main> element directly inside <body> the class sidebar-right or sidebar-left, and put an <aside class="sidebar"> in it next to the content.

<body>
  <main class="sidebar-right">
    <article>
      ...
    </article>

    <aside class="sidebar">
      <nav class="panel">
        ...
      </nav>
    </aside>
  </main>
</body>

Class on `<main>`	From 901px wide
`sidebar-right`	The `<article>` takes nine of the twelve columns, and the sidebar the three on the right.
`sidebar-left`	The sidebar takes the three columns on the left, and everything else the nine next to it.

What goes in the sidebar is up to you. A panel with a list of links works well for navigation, as on this page.

Toggle

Below 901px there is no room for a second column. Put a <details id="sidebar-toggle"> with a <summary> directly before the sidebar, and the sidebar moves out of view. The summary becomes a button fixed to the right edge of the screen, which slides the sidebar in over the content and out again. Screen readers announce it as a button that is expanded or collapsed, and while the sidebar is hidden its links can’t be reached with the keyboard either. It needs no JavaScript.

<main class="sidebar-right">
  <article>
    ...
  </article>

  <details id="sidebar-toggle">
    <summary aria-label="Pages in this section">
      <svg class="icon menu" aria-hidden="true"><use xlink:href="/images/icons.svg#sidebar-toggle"></use></svg>
      <svg class="icon close" aria-hidden="true"><use xlink:href="/images/icons.svg#clear"></use></svg>
    </summary>
  </details>

  <aside class="sidebar">
    ...
  </aside>
</main>

Part	Styling
`details#sidebar-toggle`	Hidden on wide screens. It remembers whether the sidebar is open.
`<summary>`	Hidden on wide screens. Below 901px it is the button at the edge of the screen, and it moves along with the sidebar when that opens.
`.icon.menu`	Shown in the button while the sidebar is closed.
`.icon.close`	Shown in the button while the sidebar is open.
`<aside>`	Below 901px it is 24em wide, or as wide as the screen if that is less, and lies over the content while it is open.

The order matters: the <details> and the <aside> must be direct children of <main> and follow each other in exactly that order. Without the toggle, the sidebar simply follows the content on small screens. The older form, a checkbox with the id sidebar-toggle and a label in place of the <details>, still works, but screen readers announce it as a checkbox.