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