BootstrapHow-ToBeginner · 3 min read

How to Create Breadcrumb in Bootstrap: Simple Guide

To create a breadcrumb in Bootstrap, use the nav element with aria-label="breadcrumb" and an ordered list <ol> with the class breadcrumb. Each breadcrumb item is a list item <li> with class breadcrumb-item, and the current page item should have the class active and aria-current="page".

📐

Syntax

The breadcrumb uses a <nav> element with aria-label="breadcrumb" for accessibility. Inside, an ordered list <ol> with class breadcrumb holds the breadcrumb items. Each item is a <li> with class breadcrumb-item. The current page item has active class and aria-current="page" attribute.

html

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

Output

Home > Library > Data (with Home and Library as links, Data as current page text)

💻

Example

This example shows a breadcrumb with three levels: Home, Library, and Data. The first two are clickable links, and the last one is the current page, styled differently and not clickable.

html

<!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/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <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>
</body>
</html>

Output

A horizontal breadcrumb navigation bar showing: Home > Library > Data, where Home and Library are blue clickable links and Data is plain text indicating the current page.

⚠️

Common Pitfalls

Forgetting to add aria-label="breadcrumb" on the <nav> element reduces accessibility.
Not using breadcrumb-item class on <li> elements breaks Bootstrap styling.
Missing active class and aria-current="page" on the current page item causes confusion for screen readers and styling.
Using unordered list <ul> instead of ordered list <ol> is not recommended for breadcrumbs.

html

<!-- Wrong: missing aria-label and classes -->
<nav>
  <ul>
    <li>Home</li>
    <li>Library</li>
    <li>Data</li>
  </ul>
</nav>

<!-- Right: proper classes and aria attributes -->
<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>

📊

Quick Reference

Bootstrap Breadcrumb Quick Tips:

Wrap breadcrumb in <nav aria-label="breadcrumb"> for accessibility.
Use <ol class="breadcrumb"> to hold items.
Each item is <li class="breadcrumb-item">.
Current page item: add active class and aria-current="page".
Links for all but the current page item.

✅

Key Takeaways

Use nav with aria-label="breadcrumb" for accessible breadcrumb navigation.

Wrap breadcrumb items in an ordered list ol.breadcrumb with list items having breadcrumb-item class.

Mark the current page item with active class and aria-current="page" for proper styling and accessibility.

Always use links for all breadcrumb items except the current page to help users navigate.

Avoid common mistakes like missing classes or accessibility attributes to ensure correct display and usability.