Breadcrumbs single

This is now the preferred use of breadcrumbs across new Royal Canin projects and should be used if and where possible. This breadcrumb only appears on pages that are more than two levels in depth and indicates the previous level page as a back link. It also allows a user to understand the page they are viewing on lives within a certain section and is the best solution when a breadcrumb is not required on every page of a website or app.

<div class="rc-progress rc-progress--breadcrumbs-single">
  <a href="#" class="rc-progress__breadcrumb rc-styled-link">Top level</a>
</div>

Breadcrumbs

Multi level breadcrumbs are also available and are a more traditional use of breadcrumbs and usually appear across all levels of a website or app (minus the home/start page normally), adding a level to the breadcrumb each time a new level is navigated into, with the last item in the breadcrumb being the page a user is currently viewing.

<nav class="rc-progress rc-progress--breadcrumbs-stepped">
  <ul>
    <li>
      <a class="rc-styled-link rc-progress__breadcrumb" href="#" aria-label="Links to example page">Top Level</a>
    </li>
    <li>
      <a class="rc-styled-link rc-progress__breadcrumb" href="#" aria-label="Links to example page">Secondary Level</a>
    </li>
    <li>
      <a class="rc-styled-link rc-progress__breadcrumb rc-progress__breadcrumb--current" href="#" aria-label="Links to example page">Current Page</a>
    </li>
  </ul>
</nav>