Breadcrumb Component

Indicate to the user the location of the current page within a navigation hierarchy that automatically adds separators through CSS. Bread crumbs usually improve the browsing experience and are very useful in projects, which tend to have a large structure such as magazines or documentation.

Use the class active to inform the current page. The navigation of internal links will be disabled.


Example:
<nav class="e-breadcrumb" aria-label="breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="active"><a href="#" aria-current="page">Support</a></li>
  </ul>
</nav>
Colors
                   <!-- Your color -->
<nav class="e-breadcrumb primary" aria-label="breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="active"><a href="#" aria-current="page">Support</a></li>
  </ul>
</nav>
Alignment

<nav class="e-breadcrumb centered" aria-label="breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="active"><a href="#" aria-current="page">Support</a></li>
  </ul>
</nav>
<nav class="e-breadcrumb align-end" aria-label="breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="active"><a href="#" aria-current="page">Support</a></li>
  </ul>
</nav>
<nav class="e-breadcrumb" aria-label="breadcrumb">
  <ul>
    <li><a href="#"><i class="fas fa-home text-danger"></i> Home</a></li>
    <li><a href="#"><i class="far fa-address-card text-success"></i> About</a></li>
    <li class="active"><a href="#" aria-current="page">
      <i class="fas fa-business-time text-sky"></i> Support</a>
    </li>
  </ul>
</nav>
Contribute on GitHub
Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

eFrolic | framework css 2020
eFrolic | framework css 2020

One-time donation


Donate
eFrolic | framework css 2020
eFrolic | framework css 2020

Serious sponsor


Become a Patron