Breadcrumb

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 .breadcrumb class and create children with .breadcrumb-item, here is an example:

index.html

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

Accesibility matters!

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

Scrollable overflow

When there are a lot of breadcrumb items which overflow, breadcrumb 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 breadcrumb 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="breadcrumb-wrapper" aria-label="It is a breadcrumb">
  <ol class="breadcrumb size-xs">
    ...
  </ol>
</nav>

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

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

Colors

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

index.html

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

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

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

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

Customization

Each breadcrumb 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="breadcrumb-wrapper" aria-label="It is a breadcrumb">
  <ol class="breadcrumb my-custom-breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
    <li class="breadcrumb-item"><a href="#">Videos</a></li>
    <li class="breadcrumb-item active" aria-current="location">How to create videos</li>
  </ol>
</nav>

style.css

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

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