Working together for the ultimate brand experience

Royal Canin Design Language

Breadcrumbs

Breadcrumbs are a way of displaying the current location to a user and are normally used when there are multiple layers or levels of content that can be traversed. There are two types of breadcrumb available.

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>

Copied!

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-progress__breadcrumb  rc-styled-link">Top Level</a>
    </li>
    <li>
      <a class="rc-progress__breadcrumb  rc-styled-link">Secondary Level</a>
    </li>
    <li>
      <a class="rc-progress__breadcrumb rc-progress__breadcrumb--current rc-styled-link">Current Page</a>
    </li>
    <ul> </ul>
  </ul>
</nav>

Copied!