Navigation

The bars under the site header that tell a reader where they are inside an area: secondary navigation, two levels of it, and steps.

Contents

Secondary navigation

A row of section links directly under the header, for an area that has its own sections, such as the account pages. It wraps onto a second line rather than scrolling sideways, so every section stays visible on a phone and at high zoom. To switch views within one page, use tabs.

Search
Relevant code 
<header class="ds-site-header">…</header>
<nav class="ds-subnav" aria-label="Account sections">
  <a href="/account">Account home</a>
  <a href="/account/submissions">Submissions</a>
  <a href="/account/works" aria-current="page">Works you own</a>
  <a href="/account/endorse">Endorse</a>
</nav>
.ds-subnav
A <nav> directly after the header, with an aria-label that names the area, such as “Account sections”. Plain links; never role="tab", which would promise arrow-key behaviour that page links do not have. Hidden in print.
aria-current="page"
On the link for the current page. It shows in bold with an underline bar, so the current section never depends on colour alone, and a screen reader announces it.

Two levels of navigation

An area with its own sections, each with several views, such as a report with parts and views. The sections are the secondary navigation under the header; the views of the current section are a second row inside the page.

Submissions and holds, all of cs

The view.

Relevant code 
<div class="ds-internal">
  <div class="ds-subnav">
    <nav aria-label="Report parts">
      <a href="#" aria-current="page">Submissions and holds</a>
      <a href="#">Moderators</a>
      <a href="#">Recruitment</a>
    </nav>
    <form class="ds-filter-bar" method="get" action="#" aria-label="Subject">
      <div class="ds-filter"><label for="tl-group">Group</label><select id="tl-group"><option>cs</option></select></div>
      <div class="ds-filter"><label for="tl-archive">Archive</label><select id="tl-archive"><option>cs</option></select></div>
      <div class="ds-filter"><label for="tl-cat">Category</label><select id="tl-cat"><option>All</option></select></div>
      <button class="ds-btn" type="submit">Apply</button>
    </form>
  </div>
  <div class="ds-container page-demo page-demo--wide">
    <h2>Submissions and holds, all of cs</h2>
    <nav class="ds-subnav ds-subnav--in-page" aria-label="Submissions and holds views">
      <a href="#">Activity charts</a>
      <a href="#" aria-current="page">Category submission stats</a>
      <a href="#">Recent releases</a>
      <a href="#">Recent submissions</a>
    </nav>
    <p>The view.</p>
  </div>
</div>
.ds-subnav
The first row, directly under the header. Here it holds two groups: a <nav> of the area's sections, then a compact filter bar for choices that apply to every view, such as the subject. The groups sit twice as far apart as the items inside them.
<h1>
Follows the reader's choices: the open section, then the filters, in that order, such as “Submissions and holds, all of cs” or “Moderators, cs.DC”. The reader knows where they are without breadcrumbs. The demo uses a smaller heading because it sits inside this page.
.ds-subnav--in-page
The second level: the views of the current section, in the content column, with the same current marking as the first level. Each view is its own page.

Steps

The steps of one ordered process, such as a submission, and which one the reader is on. Steps is a variant of the secondary navigation bar. To move through a queue one item at a time, use the pager. Which steps are available is the application's logic: submission, for example, lets the reader go back to a complete step but not jump ahead.

Relevant code 
<nav class="ds-subnav ds-subnav--steps" aria-label="Submission steps">
  <ol role="list">
    <li><a href="#"><span class="ds-step-number" aria-hidden="true"><svg …check…></span>Start<span class="is-sr-only">, completed</span></a></li>
    <li><a href="#" aria-current="step"><span class="ds-step-number" aria-hidden="true">5</span>Metadata</a></li>
    <li><a href="#"><span class="ds-step-number" aria-hidden="true">6</span>Categories</a></li>
    <li><span><span class="ds-step-number" aria-hidden="true">7</span>Preview<span class="is-sr-only">, not available yet</span></span></li>
  </ol>
</nav>
.ds-subnav--steps
On the secondary navigation bar. It holds an <ol role="list">, one <li> per step. It wraps onto more lines on a narrow screen, so every step stays visible.
.ds-step-number
The step number in a circle, hidden from screen readers because the list gives the position. A complete step shows a check mark instead of its number.
Complete step
A link, with the check mark and .is-sr-only text “, completed”.
aria-current="step"
On the link for the current step. It shows in bold with an underline bar and a heavier circle.
Available step
A link with its number.
Step not available yet
A <span>, not a link, so it is not a tab stop. A dashed circle and .is-sr-only text “, not available yet”.

Modifiers

Internal

The secondary navigation and steps in an internal tool. .ds-internal on a parent turns the current marking Access Lime Deep.

Secondary navigation

Relevant code 
<div class="ds-internal">
  <header class="ds-site-header">…</header>
  <nav class="ds-subnav" aria-label="Admin Console sections">
    <a href="/admin" aria-current="page">Dashboard</a>
    <a href="/admin/users">Users</a>
    <a href="/admin/moderators">Moderators</a>
  </nav>
</div>
.ds-internal
On a parent, it turns the current link's underline bar Access Lime Deep. Nothing else changes; see Secondary navigation.

Steps

Relevant code 
<div class="ds-internal">
  <nav class="ds-subnav ds-subnav--steps" aria-label="Review steps">
    <ol role="list">
      <li><a href="#"><span class="ds-step-number" aria-hidden="true"><svg …check…></span>Check<span class="is-sr-only">, completed</span></a></li>
      <li><a href="#" aria-current="step"><span class="ds-step-number" aria-hidden="true">2</span>Classify</a></li>
      <li><span><span class="ds-step-number" aria-hidden="true">3</span>Announce<span class="is-sr-only">, not available yet</span></span></li>
    </ol>
  </nav>
</div>
.ds-internal
On a parent, it turns the underline bar and the current circle Access Lime Deep.