skip to content

Sub-navigation

Use the Sub-navigation component when there are pages available related to the chosen main navigation link (as indicated by aria-current="true" in the Header component above it). For example, if the chosen route on democracyclub.org.uk is “About”, use Sub-navigation to provide links to “About” (the index page), “The Team”, “Jobs”, and “Funding”. This group of pages represents a subsection of the site called “About”.

Light theme

Dark theme

Invoke the dark theme on any component by applying class="ds-dark" to a container element.

The class="ds-subnav" element is a <nav>, exposing it as a landmark region to screen readers. Note the use of aria-label="About". This differentiates this navigation landmark from the main one above it in screen reader landmark listings. Where the section is “Our work”, use aria-label="Our work".

The aria-current="true" attribution indicates the current page, in this case the first, index page.

  <nav class="ds-subnav" aria-label="About">
    <ul>
      <li>
        <a href="/about" aria-current="true">About</a>
      </li>
      <li>
        <a href="/team">The Team</a>
      </li>
      <li>
        <a href="/jobs">Jobs</a>
      </li>
      <li>
        <a href="/funding">Funding</a>
      </li>
    </ul>
  </nav>