Responsive Breadcrumb Component in Bootstrap 5.3

In Bootstrap 5.3, a breadcrumb is a navigation component that helps users understand their current location within a website or application's navigational hierarchy. It displays a trail of links that represents the path from the homepage to the current page.

Bootstrap provides a built-in breadcrumb component that you can easily implement in your web development projects. The breadcrumb component consists of an ordered list (<ol>) with individual list items (<li>) representing each segment of the breadcrumb trail.

You can customize the breadcrumb component by adding additional list items, changing the text or URLs of the anchor elements, or applying different styles to the breadcrumb component using custom CSS or Bootstrap classes.

Bootstrap 5.3 also provides various utility classes and customization options to modify the appearance and behavior of the breadcrumb component. You can refer to the Bootstrap documentation for further details on advanced customization options.

The given code represents a simple breadcrumb structure in Bootstrap 5.3. Here's an explanation of each component

<nav>
    <ol class="breadcrumb">
      <li class="breadcrumb-item active" aria-current="page">Home</li>
    </ol>
</nav>

<nav>: This element represents a navigation section in HTML and is used to wrap the breadcrumb component.
<ol class="breadcrumb">: This is an ordered list element with the class "breadcrumb". It serves as the container for the breadcrumb items.
<li class="breadcrumb-item active" aria-current="page"> Home</li>: This is a list item element representing the breadcrumb segment. It has the class "breadcrumb-item" applied to it, indicating that it is part of the breadcrumb.
class="breadcrumb-item active": The "breadcrumb-item" class is added to style the list item as a breadcrumb segment. The "active" class is also applied to signify that it represents the current page or location in the breadcrumb trail.
aria-current="page": This attribute is added for accessibility purposes, specifying that the current page is represented by this breadcrumb item.
Home: This is the text content displayed within the breadcrumb item, indicating the name of the segment (in this case, "Home").

Modify Breadcrumb Dividers

In Bootstrap 5.3, you can modify the dividers used in the breadcrumb component by customizing the CSS or by using the available classes provided by Bootstrap. The dividers are the visual separators between the breadcrumb segments.

By default, Bootstrap 5.3 uses the forward slash ("/") as the divider between the breadcrumb items. However, you have the flexibility to change this divider or customize its appearance to match your design needs.

To modify the breadcrumb dividers in Bootstrap 5.3, you can use the following classes:

breadcrumb-divider: This class can be applied to any HTML element within the breadcrumb component to act as the divider. By default, it uses the forward slash ("/") as the divider.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Breadcrumb</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
  </head>
  <body>
    <div class="container mt-5">
      <p class="fw-semibold text-primary border-bottom border-primary py-3">Breadcrumb in Bootstrap</p>

      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item active" aria-current="page">Home</li>
        </ol>
      </nav>

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

      <nav>
        <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>
      <p class="fw-semibold text-primary border-bottom border-primary py-3">Modify Breadcrumb Dividers</p>

      <nav style="--bs-breadcrumb-divider: '>'" aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item active" aria-current="page">Library</li>
        </ol>
      </nav>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Live Preview

Remember to include the necessary Bootstrap CSS and JavaScript files in your project for the styles and functionality to work properly.