Breadcrumbs

Breadcrumbs are a necessary part of any website they determine where users are so they can navigate.
It is easy to create one just add .breadcrumbs class and create children with .crumb, here is an example:

index.html

<nav class="breadcrumbs-wrapper" aria-label="breadcrumbs">
  <ol class="breadcrumbs">
    <li class="crumb"><a href="#">Home</a></li>
    <li class="crumb"><a href="#">Tutorials</a></li>
    <li class="crumb"><a href="#">Videos</a></li>
    <li class="crumb" aria-current="location">How to create videos</li>
  </ol>
</nav>

Accesibility matters!

Always add aria-current="location" for the last breadcrumbs item, it determines it is the current page which helps screen reader users a lot.

Scrollable overflow

When there are a lot of breadcrumbs items which overflow, breadcrumbs will be scrollable instead of breaking to new line, although it will be better to set scroll position to the end with JavaScript.

Sizes

To change the breadcrumbs size use size setter classes. These classes just set a font-size property so it is possible to change it yourself by writing custom CSS.

index.html

<nav class="breadcrumbs-wrapper size-xs" aria-label="It is a breadcrumbs">
  <ol class="breadcrumbs">
    ...
  </ol>
</nav>

<nav class="breadcrumbs-wrapper size-md" aria-label="It is a breadcrumbs">
  <ol class="breadcrumbs">
    ...
  </ol>
</nav>

<nav class="breadcrumbs-wrapper size-2x" aria-label="It is a breadcrumbs">
  <ol class="breadcrumbs">
    ...
  </ol>
</nav>

Colors

There are helper classes for styling elements like breadcrumbs, first read about color setter classes for having button with diffrent background and text color.

index.html

<nav class="breadcrumbs-wrapper style-dark" aria-label="It is a breadcrumbs">
  <ol class="breadcrumbs">
    ...
  </ol>
</nav>

<nav class="breadcrumbs-wrapper style-blue" aria-label="It is a breadcrumbs">
  <ol class="breadcrumbs">
    ...
  </ol>
</nav>

<nav class="breadcrumbs-wrapper style-orange" aria-label="It is a breadcrumbs">
  <ol class="breadcrumbs">
    ...
  </ol>
</nav>

<nav class="breadcrumbs-wrapper style-yellow" aria-label="It is a breadcrumbs">
  <ol class="breadcrumbs">
    ...
  </ol>
</nav>

Customization

Each breadcrumbs has these CSS variables for customization, they can be set as :root for all breadcrumbs default style or just for a specific selector.

--flatify__breadcrumb-txt-color
--flatify__breadcrumb-bg-color
--flatify__breadcrumb-border-color

index.html

<nav class="breadcrumbs-wrapper" aria-label="It is a breadcrumbs">
  <ol class="breadcrumbs my-custom-breadcrumbs">
    <li class="crumb"><a href="#">Home</a></li>
    <li class="crumb"><a href="#">Tutorials</a></li>
    <li class="crumb"><a href="#">Videos</a></li>
    <li class="crumb" aria-current="location">How to create videos</li>
  </ol>
</nav>

style.css

.my-custom-breadcrumbs {
  /* custom breadcrumbs colors */
  --flatify__breadcrumb-txt-color: #f5f7fa;
  --flatify__breadcrumb-bg-color: #aa8e69;
  --flatify__breadcrumb-border-color: #baa286;

  /* custom breadcrumbs links */
  --flatify__link-color: #ffce54;
  --flatify__link-color__hover: #f6bb42;
  --flatify__link-color__focus: #a0d468;
}