Bootstrap 5 Breadcrumb


Breadcrumbs provide a way to display a navigation trail that shows the user's current location within a hierarchy of content. Breadcrumbs are commonly used in websites with multiple levels of content to help users understand their position and navigate back to previous pages.

  • You can create basic breadcrumbs using an ordered or unordered list (<ul> or <ol>) with list items (<li>) and anchor links (<a>).
  • Use the .breadcrumb class for the breadcrumb container.
  • Add .breadcrumb-item class to each list item.
  • Use the .active class on the last list item to indicate the current page.
Example 
<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Category</a></li>
  <li class="breadcrumb-item active">Products</li>
</ul>
Try it Yourself

Output: