Bootstrap - Breadcrumb

Bootstrap Breadcrumb

Bootstrap's breadcrumb component is a navigation aid that helps users understand their location within a website's hierarchy. The breadcrumb is a series of links that show the path from the homepage to the current page. Bootstrap provides a pre-styled way to create breadcrumbs with little effort.

Bootstrap styles the breadcrumb with a light gray background and separates each breadcrumb item with a forward slash (/) character. The breadcrumb is usually placed at the top of the page, below the header, and above the main content. It has an unordered list (<ul>) with list items (<li>) for each breadcrumb item.

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

In this structure, the <nav> element wraps the breadcrumb and provides meaning for accessibility. The <ol> element with the class "breadcrumb" creates an ordered list that represents the breadcrumb trail. Each breadcrumb item is an <li> element with the class "breadcrumb-item". The last item in the breadcrumb, which represents the current page, has an extra class of "active" and the aria-current="page" attribute for accessibility.

Bootstrap automatically styles the breadcrumb items with spacing, font size, and color. The links within the breadcrumb items are styled as well, providing a clear and clickable navigation path.

With this default styling and structure, Bootstrap makes it easy to add a breadcrumb navigation system in your web pages. You can add the necessary HTML elements and classes, and Bootstrap takes care of the rest, giving you a consistent breadcrumb component.

Creating a Basic Breadcrumb

To create a simple breadcrumb using Bootstrap, follow these steps:

1. Start with an HTML document that includes Bootstrap CSS and JavaScript files.

2. Add a <nav> element to wrap the breadcrumb and provide semantic meaning. Use the aria-label="breadcrumb" attribute to improve accessibility.

3. Inside the <nav> element, create an ordered list (<ol>) with the class "breadcrumb". This class applies Bootstrap's default styling to the breadcrumb.

4. Add list items (<li>) inside the ordered list to represent each breadcrumb item. Apply the class "breadcrumb-item" to each <li> element.

5. For each breadcrumb item, add an anchor (<a>) element with an href attribute pointing to the corresponding page URL. The text inside the anchor element will be the name of the breadcrumb item.

6. For the last breadcrumb item, which represents the current page, add the class "active" to the <li> element and remove the anchor element. Instead, use plain text to indicate the current page.

<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>

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

Customizing Breadcrumbs

While Bootstrap provides a default style for breadcrumbs, you can change the look to match your website's design. With custom CSS, you can change the separator style, font size, color, and spacing to create a unique look for your breadcrumbs.

To change the separator style, you can target the ::before pseudo-element of the .breadcrumb-item class. By default, Bootstrap uses a forward slash (/) as the separator. You can replace it with any other character or symbol by changing the content property in your CSS.

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

To change the font size, color, and spacing of the breadcrumb items, you can target the .breadcrumb class and its child elements. Use CSS properties like font-size, color, padding, and margin to make the changes you want.

.breadcrumb {
  font-size: 18px;
  color: #555;
  padding: 10px;
  margin-bottom: 20px;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 10px;
}

.breadcrumb {
  background-color: #f8f9fa;
}

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

@media (max-width: 576px) {
  .breadcrumb-item:not(:first-child):not(:last-child) {
    display: none;
  }

  .breadcrumb-item:nth-last-child(2)::before {
    content: "...";
  }
}