Skip to main content

This is a new service - your feedback will help us to improve it.

Breadcrumb


About

What does it do?

  • Breadcrumbs help users to understand where they are within a website’s structure.

When to use it?

  • When you need to help users understand and move between the multiple levels of a website.
  • Always make sure that the breadcrumb is contained within a .wmcads-container element. This ensures that the breadcrumb doesn't scale the size of large browser windows.
  • When displaying the current page within the breadcrumb, ensure that the modifier class .wmcads-breadcrumb__link--current as seen below.

When not to use it?

  • When websites have flat structure

Component example

HTML Markup

<div class="wmcads-breadcrumb">
<nav aria-label="Breadcrumb">
  <ol class="wmcads-breadcrumb__list">
    <li class="wmcads-breadcrumb__list-item">
      <a href="https://wmcadigital.github.io/wmca-design-system/" class="wmcads-breadcrumb__link">
        <svg>
          <use xlink:href="#wmcads-general-icon-home" href="#wmcads-general-icon-home"></use>
        </svg>
      </a>
    </li>
    <li class="wmcads-breadcrumb__list-item">
      <a href="https://wmcadigital.github.io/wmca-design-system/components/" class="wmcads-breadcrumb__link">
        Components
      </a>
    </li>
    <li class="wmcads-breadcrumb__list-item">
      <a href="https://wmcadigital.github.io/wmca-design-system/components/breadcrumb/" class="wmcads-breadcrumb__link wmcads-breadcrumb__link--current" aria-current="page">
        Breadcrumb
      </a>
    </li>
  </ol>
</nav>
</div>

Mobile app variant of breadcrumb

When developing a mobile app, if you are limited for space and need extra room then it is recommended to use the mobile app variant of the West Midlands Combined Authority breadcrumb component.

The mobile app version of the breadcrumb ensures that it will not show on devices with a screen width less than 768px. This means the breadcrumb will only show on devices with a screen resolution bigger than 768px.

To use the mobile app variant:

  • Add the modifier class wmcads-breadcrumb--mobile-app to the wmcads-breadcrumb element

You will most likely want to use this with the mobile variants of the header and footer patterns .

Component example

HTML Markup

<div class="wmcads-breadcrumb wmcads-breadcrumb--mobile-app">
<nav aria-label="Breadcrumb">
  <ol class="wmcads-breadcrumb__list">
    <li class="wmcads-breadcrumb__list-item">
      <a href="https://wmcadigital.github.io/wmca-design-system/" class="wmcads-breadcrumb__link">
        <svg>
          <use xlink:href="#wmcads-general-icon-home" href="#wmcads-general-icon-home"></use>
        </svg>
      </a>
    </li>
    <li class="wmcads-breadcrumb__list-item">
      <a href="https://wmcadigital.github.io/wmca-design-system/components/" class="wmcads-breadcrumb__link">
        Components
      </a>
    </li>
    <li class="wmcads-breadcrumb__list-item">
      <a href="https://wmcadigital.github.io/wmca-design-system/components/breadcrumb/" class="wmcads-breadcrumb__link wmcads-breadcrumb__link--current" aria-current="page">
        Breadcrumb
      </a>
    </li>
  </ol>
</nav>
</div>