Contextual navigation

Contextual navigation, also known as breadcrumbs, helps users know where they are on 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.

When to use contextual navigation

Use contextual navigation when you need to help users understand and move between the levels of parliament.uk.

When not to use contextual navigation

You must not use contextual navigation to show progress though a linear journey.

How contextual navigation works

The first item in the contextual navigation is a link to the parliament.uk homepage. The last item is the page the user is currently on and is not interactive.

Any items between the first and the last items are based on the architecture of the website and not a user's journey.

Types of contextual navigation

There are two types of contextual navigation:

General
House specific

The HTML for both variants is the same. The styling change comes from the branding option that is set for the page.

General

Example Open in a new tab

<div
  class="context-nav context-nav-brand"
  role="navigation"
  aria-label="Breadcrumb"
>
  <div class="container">
    <ul class="breadcrumb">
      <li><a href="">UK Parliament</a></li>
      <li><a href="">MPs and Lords</a></li>
      <li>Find MPs</li>
    </ul>
  </div>
</div>

House of Commons

Example Open in a new tab

<div class="brand-commons" style="padding-top: 35px;">
  <div
    class="context-nav context-nav-brand"
    role="navigation"
    aria-label="Breadcrumb"
  >
    <div class="container">
      <div class="house-logo">
        <span class="sr-only">This is a House of Commons page</span>
        <div class="image"></div>
      </div>
      <ul class="breadcrumb">
        <li><a href="">UK Parliament</a></li>
        <li><a href="">MPs and Lords</a></li>
        <li>Find MPs</li>
      </ul>
    </div>
  </div>
</div>

House of Lords

Example Open in a new tab

<div class="brand-lords" style="padding-top: 35px;">
  <div
    class="context-nav context-nav-brand"
    role="navigation"
    aria-label="Breadcrumb"
  >
    <div class="container">
      <div class="house-logo">
        <span class="sr-only">This is a House of Commons page</span>
        <div class="image"></div>
      </div>
      <ul class="breadcrumb">
        <li><a href="">UK Parliament</a></li>
        <li><a href="">MPs and Lords</a></li>
        <li>Find MPs</li>
      </ul>
    </div>
  </div>
</div>

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.