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.

html
            <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.

html
            <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>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 13th September 2018 [ui_assets/elements/breadcrumbs.yml]
    Spelling/ grammar
  • 12th July 2018 [ui_assets/elements/breadcrumbs.yml]
    Prefixed classes throughout the portal with rc-.
  • 8th March 2018 [ui_assets/elements/breadcrumbs.yml]
    Re-ordered nav items
  • 19th February 2018 [ui_assets/elements/breadcrumbs.yml]
    Convert all multi line text to use
  • 1st December 2017 [ui_assets/elements/breadcrumbs.yml]
    Reorganised elements navigation
  • 1st December 2017 [ui_assets/elements/breadcrumbs.yml]
    Restructured folder order.
  • 13th November 2017 [ui_assets/elements/breadcrumbs.yml]
    Added paragraph twig filter and removed p tags from YAML
  • 29th August 2017 [ui_assets/elements/breadcrumbs.yml]
    Refactored naming convention used for levels of abstraction. https://trello.com/c/H5kTHTkZ/259-copy-change-update-naming-convention-on-sidebar
  • 24th August 2017 [ui_assets/elements/breadcrumbs.yml]
    Added vertical navigation and moved horizontal + breadcrumbs into a navigation sub category.
  • 19th July 2017 [ui_assets/elements/breadcrumbs.yml]
    Added associated files to page config for use with git info collection.
  • 15th July 2017 [ui_assets/elements/breadcrumbs.yml]
    Git commit message sync improvements. Folder restructure.
  • 11th July 2017 [ui_assets/elements/breadcrumbs.yml]
    Added remaining content.