Bootstrap - Bootstrap Breadcrumbs

Bootstrap Breadcrumbs are a navigation component used to show the user's current location within a website or web application. They display the hierarchy of pages from the home page or main section to the page the user is currently viewing.

For example, consider an e-commerce website with the following navigation path:

Home → Electronics → Laptops → Gaming Laptops

This helps users understand where they are and allows them to quickly navigate back to higher-level pages.

1. Why Breadcrumbs Are Used

Breadcrumbs are particularly useful for websites with multiple levels of content. They provide a secondary navigation method without taking up much space.

The main purposes of breadcrumbs are:

To show the current location within a website.
To display the relationship between different pages.
To provide quick navigation to parent pages.
To improve the overall usability of large websites.
To help users avoid repeatedly using the browser's Back button.
To provide a clear navigation hierarchy.

For example:

Home > Products > Computers > Laptops

Here, the user can immediately understand that the Laptops page belongs to Computers, which belongs to Products.

2. Basic Bootstrap Breadcrumb Structure

Bootstrap provides the breadcrumb class for creating breadcrumbs.

A basic example is:

<nav aria-label="breadcrumb">
  <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" aria-current="page">Laptops</li>
  </ol>
</nav>

The <nav> element represents the navigation section.

The aria-label="breadcrumb" attribute helps screen readers understand that this navigation represents a breadcrumb trail.

The <ol> element contains the breadcrumb items.

The breadcrumb class applies Bootstrap's breadcrumb styling.

Each individual item uses:

<li class="breadcrumb-item">

3. Understanding `breadcrumb-item`

Every individual level in the breadcrumb is represented using the breadcrumb-item class.

For example:

<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Services</a></li>
<li class="breadcrumb-item"><a href="#">Web Development</a></li>

Each item represents one level in the website hierarchy.

Usually, previous pages are made clickable using an <a> element.

<a href="products.html">Products</a>

This allows the user to navigate back to that section.

4. Creating the Active Breadcrumb

The page the user is currently viewing should normally be represented as the active breadcrumb.

Bootstrap uses:

breadcrumb-item active

For example:

<li class="breadcrumb-item active" aria-current="page">
  Laptops
</li>

Unlike previous breadcrumb items, the current page generally does not need to be a link.

A complete example is:

<nav aria-label="breadcrumb">
  <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">
      <a href="#">Computers</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
      Laptops
    </li>
  </ol>
</nav>

The resulting hierarchy is:

Home / Products / Computers / Laptops

5. Using Breadcrumbs with Real Links

Breadcrumbs become more useful when the previous levels contain actual URLs.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="/">Home</a>
    </li>

    <li class="breadcrumb-item">
      <a href="/courses">Courses</a>
    </li>

    <li class="breadcrumb-item">
      <a href="/courses/programming">Programming</a>
    </li>

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

In this example, users can click Home, Courses, or Programming to move to those sections.

Bootstrap automatically provides the visual separation between the breadcrumb items.

6. Breadcrumb Separators

Bootstrap normally displays separators between breadcrumb items.

For example:

Home / Products / Laptops

The separator is generated through Bootstrap's styling rather than requiring you to manually add / between every item.

Therefore, you should not write:

Home / Products / Laptops

inside each list item.

Instead, structure the HTML properly:

<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">Laptops</li>
</ol>

Bootstrap handles the presentation.

7. Customizing the Breadcrumb Separator

Bootstrap allows developers to customize the breadcrumb separator using CSS variables.

For example:

.breadcrumb {
  --bs-breadcrumb-divider: ">";
}

The breadcrumb will then appear similar to:

Home > Products > Laptops

You can also use another character:

.breadcrumb {
  --bs-breadcrumb-divider: "|";
}

This produces:

Home | Products | Laptops

A custom text separator can also be used:

.breadcrumb {
  --bs-breadcrumb-divider: "→";
}

However, when building accessible interfaces, decorative separators should not be relied upon to communicate the hierarchy. The HTML structure should clearly represent the navigation relationship.

8. Using an Empty Separator

If you do not want a visible separator, you can customize it with an empty value.

For example:

.breadcrumb {
  --bs-breadcrumb-divider: "";
}

This can be useful when you want to create a very minimal navigation style and provide separation through spacing or other styling.

9. Breadcrumbs with Bootstrap Containers

Breadcrumbs are often placed inside a Bootstrap container to maintain consistent page spacing.

<div class="container">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item">
        <a href="#">Home</a>
      </li>

      <li class="breadcrumb-item">
        <a href="#">Blog</a>
      </li>

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

This is especially useful in responsive websites because the container controls the overall horizontal layout.

10. Breadcrumbs in an E-Commerce Website

Breadcrumbs are particularly useful for online stores.

Suppose a customer is viewing a product:

Home > Electronics > Computers > Laptops > Dell Laptop

The HTML could be:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">

    <li class="breadcrumb-item">
      <a href="/">Home</a>
    </li>

    <li class="breadcrumb-item">
      <a href="/electronics">Electronics</a>
    </li>

    <li class="breadcrumb-item">
      <a href="/electronics/computers">Computers</a>
    </li>

    <li class="breadcrumb-item">
      <a href="/electronics/computers/laptops">Laptops</a>
    </li>

    <li class="breadcrumb-item active" aria-current="page">
      Dell Laptop
    </li>

  </ol>
</nav>

This allows customers to return directly to the Electronics, Computers, or Laptops category.

11. Breadcrumbs in a Blog

Breadcrumbs can also be used in blogs.

For example:

Home > Technology > Web Development > Bootstrap

Implementation:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="/">Home</a>
    </li>

    <li class="breadcrumb-item">
      <a href="/technology">Technology</a>
    </li>

    <li class="breadcrumb-item">
      <a href="/technology/web-development">Web Development</a>
    </li>

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

This makes the structure of the blog easier for users to understand.

12. Accessibility and ARIA

Accessibility is an important part of implementing breadcrumbs correctly.

Bootstrap recommends placing breadcrumbs inside a navigation element:

<nav aria-label="breadcrumb">

The aria-label tells assistive technologies what type of navigation is being provided.

The current page should also use:

aria-current="page"

For example:

<li class="breadcrumb-item active" aria-current="page">
  Bootstrap
</li>

This communicates to screen readers that Bootstrap is the current page.

13. Ordered List vs Unordered List

Breadcrumbs are generally represented using an ordered list:

<ol class="breadcrumb">

An ordered list is appropriate because breadcrumbs represent a sequence or hierarchy.

Each level is then represented using:

<li class="breadcrumb-item">

This creates a logical document structure even if the visual appearance does not look like a traditional numbered list.

14. Responsive Breadcrumbs

Breadcrumbs naturally work across different screen sizes, but long breadcrumb paths can become difficult to display on small screens.

For example:

Home > Products > Electronics > Computers > Laptops > Gaming Laptops

On a desktop screen, this may fit comfortably.

On a mobile device, it may require too much horizontal space.

For this reason, developers should keep breadcrumb labels concise and avoid unnecessarily deep navigation hierarchies.

A mobile-friendly structure might be:

Home > Laptops > Gaming Laptops

instead of displaying every possible category level.

15. Breadcrumbs vs Main Navigation

Breadcrumbs should not replace the main navigation menu.

The main navigation helps users move between major sections of a website:

Home | Products | Services | About | Contact

Breadcrumbs show the user's current location within one particular section:

Home > Products > Computers > Laptops

Therefore, both can be used together.

16. Complete Example

Here is a complete Bootstrap breadcrumb example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Bootstrap Breadcrumb Example</title>

  <link
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet">
</head>

<body>

  <div class="container mt-4">

    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">

        <li class="breadcrumb-item">
          <a href="/">Home</a>
        </li>

        <li class="breadcrumb-item">
          <a href="/courses">Courses</a>
        </li>

        <li class="breadcrumb-item">
          <a href="/courses/web-development">Web Development</a>
        </li>

        <li class="breadcrumb-item active" aria-current="page">
          Bootstrap
        </li>

      </ol>
    </nav>

    <h1>Bootstrap</h1>

    <p>
      Learn how to create responsive websites using Bootstrap.
    </p>

  </div>

</body>
</html>

17. Important Classes and Attributes

Class/Attribute	Purpose
`breadcrumb`	Creates the Bootstrap breadcrumb container
`breadcrumb-item`	Defines an individual breadcrumb level
`active`	Identifies the current breadcrumb
`aria-label="breadcrumb"`	Identifies the navigation for accessibility
`aria-current="page"`	Identifies the current page
`--bs-breadcrumb-divider`	Customizes the breadcrumb separator

18. Advantages of Bootstrap Breadcrumbs

Bootstrap breadcrumbs provide several benefits:

They improve website navigation.
They clearly communicate page hierarchy.
They make large websites easier to navigate.
They provide quick access to parent pages.
They require very little CSS because Bootstrap provides the default styling.
They can be customized using Bootstrap's CSS variables.
They support responsive website layouts.
Proper semantic HTML and ARIA attributes make them more accessible.

19. Best Practices

When implementing Bootstrap breadcrumbs, follow these practices:

Keep breadcrumb labels short and meaningful.
Make previous levels clickable.
Do not normally make the current page a link.
Use aria-label="breadcrumb" on the navigation element.
Use aria-current="page" for the current page.
Avoid excessively deep breadcrumb structures.
Use meaningful URLs for navigable breadcrumb items.
Do not use breadcrumbs as a replacement for the primary navigation.
Ensure breadcrumbs remain readable on mobile devices.
Maintain a logical hierarchy that reflects the actual website structure.

Conclusion

Bootstrap Breadcrumbs provide a simple and effective way to display a website's hierarchical navigation structure. By combining the breadcrumb and breadcrumb-item classes with semantic HTML and accessibility attributes, developers can create navigation trails that are easy to understand and use.

They are particularly valuable for e-commerce websites, documentation portals, educational websites, blogs, and other applications containing multiple levels of content. With Bootstrap's built-in styling and customizable separators, developers can create consistent breadcrumb navigation without writing extensive CSS.

Bootstrap - Bootstrap Breadcrumbs

1. Why Breadcrumbs Are Used

2. Basic Bootstrap Breadcrumb Structure

3. Understanding breadcrumb-item

4. Creating the Active Breadcrumb

5. Using Breadcrumbs with Real Links

6. Breadcrumb Separators

7. Customizing the Breadcrumb Separator

8. Using an Empty Separator

9. Breadcrumbs with Bootstrap Containers

10. Breadcrumbs in an E-Commerce Website

11. Breadcrumbs in a Blog

12. Accessibility and ARIA

13. Ordered List vs Unordered List

14. Responsive Breadcrumbs

15. Breadcrumbs vs Main Navigation

16. Complete Example

17. Important Classes and Attributes

18. Advantages of Bootstrap Breadcrumbs

19. Best Practices

Conclusion

3. Understanding `breadcrumb-item`