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.
<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>
<!-- 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>
<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>
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.