Skip to main content

Breadcrumbs v1.1.0

Provides a navigational trail that helps users understand their location within a website's hierarchy.

<nav aria-label="Breadcrumbs" class="breadcrumb">

  <ol class="breadcrumb__list" role="list">
    <li><a href="https://radancy.dev">Home</a></li>
    <li><a href="#!">Subpage</a></li>
    <li><a href="#!">Subpage</a></li>
    <li><a href="#!">Subpage</a></li>
    <li><a href="#content" aria-current="page">Breadcrumbs</a></li>
  </ol>

</nav>
/*!

  Radancy Component Library: Breadcrumbs

  Contributor(s):
  Michael "Spell" Spellacy

  Dependencies: Sass

*/

.breadcrumb {

--breadcrumb-color-track: #949595; // Track Color
--breadcrumb-color-thumb: #5D00C7; // Thumb Color
--breadcrumb-color-active: #3E0085; // Active State

padding: 1em 0;

  &[data-scroll] {

    overflow-x: auto;

    // Fallback Scrollbar

    scrollbar-color: var(--breadcrumb-color-thumb) var(--breadcrumb-color-track);
    scrollbar-width: thin;

    @supports #{"\selector(::-webkit-scrollbar)"} {

      scrollbar-color: initial;
      scrollbar-width: auto;

      &::-webkit-scrollbar {
      height: calc(8rem / 16);
      }

      &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb {
      border-radius: 100vw;
      }
  
      &::-webkit-scrollbar-track {
      background-color: var(--breadcrumb-color-track);
      }
  
      &::-webkit-scrollbar-thumb {
      background-color: var(--breadcrumb-color-thumb);

        &:hover {
        background-color: var(--breadcrumb-color-active);
        }

      }
    
    }

  }

  &__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;

    [data-scroll] & {

      flex-wrap: nowrap;

    }

    li {

      &:not(:last-child) {

        &:after {
        content: "\003E";
        font-size: 1.1rem;
        }

      }

    }

    a {
    display: inline-block;
    line-height: normal;
    outline-offset: -5px;
    padding: 0.5em 1em;

      &[aria-current] {
      font-weight: bold;
      text-decoration: none;
      }

    }

  }

}

Properties

Use the following properties to configure this component.

ARIA Applies To Note Description
aria-current a Mandatory
Allows assistive technology users to know where they are within the site. The attribute must always be on the link of the page selected and must include a value of page.

Attribute Applies To Note Description
data-scroll .breadcrumb Boolean, Optional
Used to change the list into a scroll in smaller viewport sizes.

Class Applies To Note Description
.breadcrumb nav Mandatory
Used on the parent element that wraps your content. In this case, a nav element, which must always be used and be given a distinct accessible name.
.breadcrumb__list ol Mandatory
Used on the element that wraps your list. Must be a child of .breadcrumb.

Release Notes

Keep up to date on major changes to this component.

Feature
Dynamically add aria-current to selected navigation item based on URL or page ID.

Report Issues

Find a bug? Want a new feature? Report it on JIRA. You're so awesome!