Primary navigation

The primary navigation allows users to navigate across the whole of parliament.uk.

The Improving User Experience cluster want to make this component better.

If you work in Parliament and are using it or plan to use it, please contact us on the #design-system Slack channel.

How to use primary navigation

Primary navigation is used as the single, main, top level navigation element on a website.

Do not use it as a sub-navigation or with any other primary navigation component.

Example Open in a new tab: primary navigation

We can’t show an example of this component. To see it use the ‘Open in a new tab’ link above.

 
<header>
  <div class="container">
    <a
      href="https://www.parliament.uk"
      class="parliament-home"
      aria-label="UK Parliament"
    >
      <svg
        aria-hidden="true"
        width="159"
        height="40"
        viewBox="0 0 159 40"
        fill="#fff"
        xmlns="http://www.w3.org/2000/svg"
      >
        <use href="#p-icon__uk-parliament" />
      </svg>
    </a>
    <button
      class="p-primary-nav__open-button p-primary-nav__toggle-menu btn"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span>Menu</span>
    </button>
    <nav class="p-primary-nav">
      <div class="p-primary-nav__logo"></div>
      <h2 class="p-primary-nav__title">Menu</h2>
      <div class="p-primary-nav__description">Select an action to perform</div>
      <ul class="p-primary-nav__list">
        <li class="p-primary-nav__item p-primary-nav__item--dropdown">
          <a class="p-primary-nav__item-link" aria-expanded="false" href="#">
            <span class="p-primary-nav__item-header">
              Dropdown Item Header
            </span>
            <span class="p-primary-nav__item-subheader">Item Subheader</span>
          </a>
          <ul class="p-primary-nav__sublist">
            <li class="p-primary-nav__subitem">
              <a class="p-primary-nav__subitem-link" href="#">Sub Item</a>
            </li>
            <li class="p-primary-nav__subitem">
              <a class="p-primary-nav__subitem-link" href="#">Sub Item</a>
            </li>
            <li
              class="p-primary-nav__subitem p-primary-nav__subitem--divider"
            ></li>
            <li class="p-primary-nav__subitem">
              <a class="p-primary-nav__subitem-link" href="#">Sub Item</a>
            </li>
          </ul>
        </li>
        <li class="p-primary-nav__item">
          <a class="p-primary-nav__item-link" href="#">
            <span class="p-primary-nav__item-header">
              Non-dropdown Item Header
            </span>
            <span class="p-primary-nav__item-subheader">
              Non-dropdown Item Subheader
            </span>
          </a>
        </li>
        <li
          class="p-primary-nav__item p-primary-nav__item--dropdown p-primary-nav__item--profile"
        >
          <a class="p-primary-nav__item-link" aria-expanded="false" href="#">
            <div class="p-primary-nav__item-headers">
              <span class="p-primary-nav__item-header">Ms Diane Abbott</span>
              <span class="p-primary-nav__item-subheader">Constituency</span>
            </div>
            <div class="p-primary-nav__avatar">
              <div
                class="p-primary-nav__avatar-image"
                style="
                  background-image: url(https://members-api.parliament.uk/api/Members/172/Portrait?cropType=OneOne&webVersion=true);
                "
              ></div>
            </div>
          </a>
          <ul class="p-primary-nav__sublist">
            <li class="p-primary-nav__subitem">
              <a class="p-primary-nav__subitem-link" href="#">Sub Item</a>
            </li>
          </ul>
        </li>
        <a
          href="#"
          class="p-primary-nav__close-button p-primary-nav__toggle-menu"
        >
          Close
        </a>
      </ul>
    </nav>
  </div>
</header>

HTML Markup

Position the primary navigation within the header component.

JavaScript

To enable the dropdown, accessibility, and mobile features, instantiate the PrimaryNav class in your JavaScript entry point.

This will:

  • enable opening and closing of subnavs
  • add accessibility features including aria-expanded attributes
  • allow opening and closing of the menu on mobile and tablet devices
 
import { PrimaryNav } from "@pds-design-system/core";
new PrimaryNav();

How primary navigation works

The primary navigation consists of a top-level list of items (p-primary-nav__item).

Dropdown items consist of a sublist (p-primary-nav__sublist) that contains subitems (p-primary-nav__subitem).

A heading and subheading field is available at the extra-small, small, and medium breakpoints. At the large and extra large breakpoints this is not displayed.

Opening and closing the navigation overlay on mobiles and tablets is powered by the p-primary-nav__open-button and p-primary-nav__close-button elements. These elements must include the p-primary-nav__toggle-menu class.

Modifiers and variations

Two modifiers exist for nav items:

--dropdown (p-primary-nav__item--dropdown) adds the dropdown-specific styles and interactivity.

--profile (p-primary-nav__item--profile) is a variant used for profile-type dropdowns (e.g. My Account). See the HTML Markup for an example.

Have a question, suggestion or feedback?

The Improving User Experience cluster manages the design system.

If you work in Parliament, contact us on the #design-system Slack channel.