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 singleThis 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>
BreadcrumbsMulti 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 href="#" class="rc-progress__breadcrumb rc-styled-link">Top level</a> </li> <li> <a href="#" class="rc-progress__breadcrumb rc-styled-link">Secondary level</a> </li> <li> <a href="#" class="rc-progress__breadcrumb rc-progress__breadcrumb--current rc-styled-link">Current page</a> </li> <ul> </nav>