Breadcrumbs

Default breadcrumbs

HTML


<ol class="orc-c-breadcrumbs " role="navigation">

  <li class="orc-c-breadcrumbs__item">
    <a href="#" class="orc-c-breadcrumbs__link">Parent</a>
    <svg class="orc-c-breadcrumbs__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#arrow-right"></use>
        </svg>
  </li>
  <!-- end orc-c-breadcrumbs__item -->
  <li class="orc-c-breadcrumbs__item">
    <a href="#" class="orc-c-breadcrumbs__link">Child</a>
    <svg class="orc-c-breadcrumbs__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#arrow-right"></use>
        </svg>
  </li>
  <!-- end orc-c-breadcrumbs__item -->
  <li class="orc-c-breadcrumbs__item">
    <a href="#" class="orc-c-breadcrumbs__link">Grandchild</a>
  </li>
  <!-- end orc-c-breadcrumbs__item -->

</ol>
<!-- end orc-c-breadcrumbs -->

When to use

Use breadrumbs on administrative-focused pages deep into a user journey to help users navigate back, if you feel it’s necessary.

When to consider an alternative

Consider not including breadcrumbs. We don’t use them very liberally, instead allowing heroes and other imagery above the fold to bleed right into the header.

Class Name	Description
`orc-c-breadcrumbs` Required	Apply to breadcrumbs’ containing `ol` container to show that order of the list items is significant. This is set to `display: flex` to place breadcrumbs items side-by-side.
`orc-c-breadcrumbs__item` Required	Apply to breadcrumbs `li` tags within the ordered list. This will help layout the breadcrumbs link and icon between list items.
`orc-c-breadcrumbs__link` Required	Apply to the `a` tag within each breadcrumb item to help link elsewhere.
`orc-c-breadcrumbs__icon` Required	Apply to the `svg` tag to represent the icon between breadcrumbs items.

Usage

When to use

When to consider an alternative