Skip to main content

Your privacy settings

If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies

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 .wmre-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 .wmre-breadcrumb__link--current as seen below.

When not to use it?

  • When websites have flat structure

Component example

HTML Markup

<div class="wmre-breadcrumb">
<div class="wmre-container">
<nav aria-label="Breadcrumb">
  <ol class="wmre-breadcrumb__list">
    <li class="wmre-breadcrumb__list-item">
      <a href="https://wmcadigital.github.io/wmre-design-system/" class="wmre-breadcrumb__link">
        Home
      </a>
    </li>
    <li class="wmre-breadcrumb__list-item">
      <a href="https://wmcadigital.github.io/wmre-design-system/components/" class="wmre-breadcrumb__link">
        Components
      </a>
    </li>
    <li class="wmre-breadcrumb__list-item">
      <a href="https://wmcadigital.github.io/wmre-design-system/components/breadcrumb/" class="wmre-breadcrumb__link wmre-breadcrumb__link--current" aria-current="page">
        Breadcrumb
      </a>
    </li>
  </ol>
</nav>
</div>
</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 Rail Executive 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 wmre-breadcrumb--mobile-app to the wmre-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="wmre-breadcrumb wmre-breadcrumb--mobile-app">
<div class="wmre-container">
<nav aria-label="Breadcrumb">
  <ol class="wmre-breadcrumb__list">
    <li class="wmre-breadcrumb__list-item">
      <a href="https://wmcadigital.github.io/wmre-design-system/" class="wmre-breadcrumb__link">
        Home
      </a>
    </li>
    <li class="wmre-breadcrumb__list-item">
      <a href="https://wmcadigital.github.io/wmre-design-system/components/" class="wmre-breadcrumb__link">
        Components
      </a>
    </li>
    <li class="wmre-breadcrumb__list-item">
      <a href="https://wmcadigital.github.io/wmre-design-system/components/breadcrumb/" class="wmre-breadcrumb__link wmre-breadcrumb__link--current" aria-current="page">
        Breadcrumb
      </a>
    </li>
  </ol>
</nav>
</div>
</div>