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