Bootstrap - Breadcrumbs Demo

Creating a Basic Breadcrumb

A breadcrumb is a navigation aid that helps users understand their current location within a website's hierarchy. Bootstrap provides a way to create breadcrumbs using its classes.

To create a basic breadcrumb, start with an ordered list (<ol>) element and add the breadcrumb class to it. Each breadcrumb item should be wrapped in a list item (<li>) element. The current or active page should have the additional class active applied to its list item.

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Products</a></li>
  <li class="breadcrumb-item active">Accessories</li>
</ol>

The breadcrumb-item class styles each breadcrumb item, while the active class is used to highlight the current page. The inactive breadcrumb items contain links (<a>) that allow users to navigate to the corresponding pages.

By default, Bootstrap adds a forward slash (/) as the separator between breadcrumb items. This separator is added using CSS pseudo-elements (:before and :after) on the breadcrumb-item class.

To further customize the appearance of the breadcrumb, you can modify the styles of the breadcrumb and breadcrumb-item classes. For example, you can change the background color, font size, or padding of the breadcrumb items to match your website's design.

Remember to adjust the links within the breadcrumb items to point to the appropriate pages on your website.

Customizing Breadcrumb Styles

Bootstrap provides default styling for breadcrumbs, but you can customize the appearance to match your website's design. Here are some ways to change the separator style, modify spacing and padding, and customize colors and fonts.

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

This changes the separator to a greater-than sign (>). You can replace it with any character or symbol you prefer.

.breadcrumb-item {
  padding: 0.5rem 1rem;
  margin-right: 0.5rem;
}

This code sets the padding to 0.5rem on the top and bottom, and 1rem on the left and right. It also adds a 0.5rem margin to the right of each breadcrumb item, creating space between them.

.breadcrumb {
  background-color: #f8f9fa;
  font-family: Arial, sans-serif;
}

.breadcrumb-item > a {
  color: #007bff;
}

.breadcrumb-item.active {
  color: #6c757d;
}

This sets the background color of the breadcrumb to a light gray (#f8f9fa) and changes the font family to Arial. The link color of inactive breadcrumb items is set to blue (#007bff), while the active item's color is set to a darker gray (#6c757d).

You can adjust these values to match your website's color scheme and typography. By changing the colors and fonts, you can create a cohesive look that fits with your overall design.

Adding Icons to Breadcrumbs

You can add icons to breadcrumbs to give visual cues and improve the user experience. Bootstrap has many icons that you can use with breadcrumb text. Here's how to include icons in breadcrumbs using Bootstrap's icon library.

To add icons to breadcrumbs, use the <i> or <span> elements in the breadcrumb items. Bootstrap has a wide range of icons, including home, folder, and file icons, which are often used in breadcrumbs.

<ol class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="#">
      <i class="bi bi-house"></i> Home
    </a>
  </li>
  <li class="breadcrumb-item active">Products</li>
</ol>

<ol class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="#">
      <i class="bi bi-folder"></i> Projects
    </a>
  </li>
  <li class="breadcrumb-item">
    <a href="#">
      <i class="bi bi-folder"></i> Web Development
    </a>
  </li>
  <li class="breadcrumb-item active">
    <i class="bi bi-file-earmark"></i> index.html
  </li>
</ol>

You can change the size and color of the icons by adding classes or styles to the <i> or <span> elements. For example, you can use the text-primary class to apply the primary color to the icons or adjust the font size using CSS.

<ol class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="#">
      <i class="bi bi-house text-primary" style="font-size: 1.2rem;"></i> Home
    </a>
  </li>
  <li class="breadcrumb-item active">Products</li>
</ol>

By adding icons to breadcrumbs, you can give visual indicators that help users understand the website's structure and their current location within it. Bootstrap's icon library has many icons to choose from, making it easy to find suitable icons for your breadcrumbs.

Implementing Responsive Breadcrumbs

As websites are viewed on various devices with different screen sizes, it's important to make breadcrumbs responsive. Bootstrap provides built-in classes that help create responsive breadcrumbs that adapt to different screen sizes.

To make a breadcrumb responsive, you can use the d-none and d-md-flex classes. The d-none class hides the breadcrumb on all screen sizes, while the d-md-flex class displays the breadcrumb as a flex container on medium-sized screens and larger.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb d-none d-md-flex">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Products</a></li>
    <li class="breadcrumb-item active" aria-current="page">Accessories</li>
  </ol>
</nav>

To collapse breadcrumbs on smaller screens, you can use the d-md-none class to display a collapsed version of the breadcrumb. This can be done by showing only the last breadcrumb item and using a dropdown menu to reveal the full path when clicked.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb d-none d-md-flex">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Products</a></li>
    <li class="breadcrumb-item active" aria-current="page">Accessories</li>
  </ol>

  <div class="dropdown d-md-none">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="breadcrumbDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Accessories
    </button>
    <div class="dropdown-menu" aria-labelledby="breadcrumbDropdown">
      <a class="dropdown-item" href="#">Home</a>
      <a class="dropdown-item" href="#">Products</a>
      <a class="dropdown-item active" href="#">Accessories</a>
    </div>
  </div>
</nav>

In this code, the full breadcrumb is displayed on medium-sized screens and larger using the d-none and d-md-flex classes. On smaller screens, the breadcrumb is hidden, and a dropdown button is shown using the d-md-none class. The dropdown button displays the last breadcrumb item, and when clicked, it reveals the full path in a dropdown menu.

By implementing responsive breadcrumbs, you can provide a better user experience across different devices and screen sizes. Users can easily navigate your website's hierarchy, regardless of the device they are using.

Breadcrumbs with Dropdown Menus

Dropdown menus can be added to breadcrumbs to give more navigation options or to show a list of related pages. This is useful when you have a complex website structure or want to offer quick access to sub-pages. Here's how you can create breadcrumbs with dropdown menus using Bootstrap.

To add a dropdown menu to a breadcrumb item, wrap the item's content inside a <div> element with the class dropdown. Inside the <div>, add a button with the classes btn, btn-secondary, and dropdown-toggle. This button will act as the trigger for the dropdown menu. Add the data-toggle="dropdown" attribute to the button to enable the dropdown functionality.

Next, create a <div> element with the class dropdown-menu to hold the dropdown menu items. Inside this <div>, add <a> elements with the class dropdown-item for each menu item.

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item">
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="productDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Products
      </button>
      <div class="dropdown-menu" aria-labelledby="productDropdown">
        <a class="dropdown-item" href="#">Electronics</a>
        <a class="dropdown-item" href="#">Clothing</a>
        <a class="dropdown-item" href="#">Home & Garden</a>
      </div>
    </div>
  </li>
  <li class="breadcrumb-item active">Accessories</li>
</ol>

To style and customize the dropdown menu, you can apply CSS to the dropdown-menu and dropdown-item classes.

.dropdown-menu {
  background-color: #f8f9fa;
  font-size: 0.9rem;
}

.dropdown-item {
  padding: 0.5rem 1rem;
}

.dropdown-item:hover {
  background-color: #e9ecef;
}

This CSS code sets the background color of the dropdown menu to a light gray, reduces the font size, and adjusts the padding of the dropdown items. It also adds a hover effect to the dropdown items, changing their background color when the cursor is over them.

By adding dropdown menus to breadcrumbs, you can give users more navigation options and make it easier for them to access related pages. This is especially helpful when dealing with complex website hierarchies or when you want to offer quick links to sub-pages.

Integrating Breadcrumbs with Other Components

You can combine breadcrumbs with other Bootstrap components to create a user-friendly navigation experience. Here's how you can integrate breadcrumbs with navbars, page headers, cards, and jumbotrons, and align them with other page elements.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">My Website</a>
  <ol class="breadcrumb mb-0">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Products</a></li>
    <li class="breadcrumb-item active">Accessories</li>
  </ol>
</nav>

<div class="container">
  <h1>Accessories</h1>
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Products</a></li>
    <li class="breadcrumb-item active">Accessories</li>
  </ol>
</div>

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Accessories</h5>
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item"><a href="#">Products</a></li>
      <li class="breadcrumb-item active">Accessories</li>
    </ol>
    <p class="card-text">Browse our collection of accessories.</p>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <h1 class="text-center">Accessories</h1>
      <ol class="breadcrumb justify-content-center mb-4">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Products</a></li>
        <li class="breadcrumb-item active">Accessories</li>
      </ol>
      <p>Browse our collection of accessories.</p>
    </div>
  </div>
</div>