In Bootstrap 5, breadcrumbs are used to indicate the current page's location within a navigational hierarchy. They visually show the path from the homepage to the current page and allow users to easily navigate back to previous pages.

Key Features:

• Breadcrumbs are built using an ordered list (<ol>) with the class .breadcrumb.
• Each breadcrumb item is wrapped inside an <li> element with the class .breadcrumb-item.
• The current page (or the active item) has an additional class .active, and by default, it’s styled to look inactive (i.e., not clickable).

Basic Example:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Explanation:

1. <nav aria-label="breadcrumb">: The aria-label attribute is used to define a label for assistive technologies like screen readers.
2. <ol class="breadcrumb">: The breadcrumbs are presented as an ordered list. The .breadcrumb class applies Bootstrap's styling.
3. <li class="breadcrumb-item">: Each breadcrumb item represents a link in the path.
   • Breadcrumbs that are not the current page are typically clickable links (<a href="#">).
   • The last breadcrumb (.active) is marked as the current page and is not clickable. It has the aria-current="page" attribute for accessibility.

Customizing Separators:

Bootstrap 5 uses a "/" by default to separate breadcrumb items, but you can customize this separator with CSS if needed.

For example, you can replace the default separator by adding a custom CSS rule like:

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
}

This will replace the default / with a > as a separator between breadcrumb items.

Conclusion:

Breadcrumbs in Bootstrap 5 are easy to implement and are a great way to improve user navigation, especially on websites with deep content hierarchies.