Bootstrap Breadcrumbs

Breadcrumbs are a secondary navigation system that shows the path from the homepage or parent section to the current page.

For example, a tutorial website may display:

Home / Tutorials / Bootstrap / Breadcrumbs

Each level can help the user navigate back to a previous section.

The .breadcrumb class creates the main Breadcrumb container.

<nav aria-label="breadcrumb">

    <ol class="breadcrumb">

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

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

            Tutorials

        </li>

    </ol>

</nav>

The .breadcrumb class is applied to an ordered list containing the breadcrumb items.

<ol class="breadcrumb">

    ...

</ol>

Bootstrap automatically styles the list to look like a horizontal breadcrumb navigation.

The .breadcrumb-item class is used for each individual breadcrumb level.

<li class="breadcrumb-item">

    <a href="#">
    Home
    </a>

</li>

Each item normally represents a level in the website hierarchy.

The current page is usually displayed using the .active class.

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

Breadcrumbs

</li>

A Breadcrumb can contain multiple levels depending on the website structure.

<ol class="breadcrumb">

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

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

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

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

        Breadcrumbs

    </li>

</ol>

Breadcrumbs should normally be placed inside a <nav> element because they represent navigation.

<nav aria-label="breadcrumb">

    <ol class="breadcrumb">

        ...

    </ol>

</nav>

The aria-label helps assistive technologies identify the purpose of the navigation.

Parent breadcrumb items are normally clickable links.

<li class="breadcrumb-item">

    <a href="index.php">
    Home
    </a>

</li>

<li class="breadcrumb-item">

    <a href="tutorials.php">
    Tutorials
    </a>

</li>

The current page generally does not need to be a link.

A tutorial website can use Breadcrumbs to show the user's position in the tutorial hierarchy.

<nav aria-label="breadcrumb">

    <ol class="breadcrumb">

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

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

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

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

            Breadcrumbs

        </li>

    </ol>

</nav>

The first Breadcrumb item is commonly a link to the website homepage.

<li class="breadcrumb-item">

    <a href="index.php">
    Home
    </a>

</li>

This gives users a quick way to return to the main page.

A simple website may use three levels such as Home, Products, and Current Product.

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

            Laptop

        </li>

    </ol>

</nav>

Bootstrap displays separators between Breadcrumb items automatically. The default separator is controlled by Bootstrap's CSS.

<ol class="breadcrumb">

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

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

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

    Bootstrap

    </li>

</ol>

Bootstrap's Breadcrumb separator can be customized with CSS variables or custom CSS when a different separator is required.

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

For example, the separator can be changed to a greater-than symbol.

A slash can be used as a visual separator when the Breadcrumb style is customized.

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

The HTML structure remains the same:

<ol class="breadcrumb">

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

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

    Bootstrap

    </li>

</ol>

A greater-than symbol is commonly used in website navigation Breadcrumbs.

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

This can visually produce a structure similar to:

Home > Tutorials > Bootstrap

Breadcrumb items can contain text and icons when an icon library or inline icon markup is available.

<li class="breadcrumb-item">

    <a href="#">

    🏠 Home

    </a>

</li>

A Breadcrumb can be placed inside a Bootstrap container to align it with the main page content.

<div class="container">

    <nav aria-label="breadcrumb">

        <ol class="breadcrumb">

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

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

            Tutorials

            </li>

        </ol>

    </nav>

</div>

Breadcrumbs are often placed above the main page heading.

<nav aria-label="breadcrumb">

    <ol class="breadcrumb">

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

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

        Bootstrap

        </li>

    </ol>

</nav>


<h1>
Bootstrap Tutorial
</h1>

Breadcrumbs are useful in admin dashboards where pages may have several levels.

<nav aria-label="breadcrumb">

    <ol class="breadcrumb">

        <li class="breadcrumb-item">
        <a href="dashboard.php">
        Dashboard
        </a>
        </li>

        <li class="breadcrumb-item">
        <a href="students.php">
        Students
        </a>
        </li>

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

        Student Details

        </li>

    </ol>

</nav>

E-commerce websites often use Breadcrumbs to show the category path of a product.

<nav aria-label="breadcrumb">

    <ol class="breadcrumb">

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

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

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

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

        Laptop

        </li>

    </ol>

</nav>

In a PHP application, Breadcrumb text and links can be generated dynamically.

<?php

$category = "Bootstrap";
$page = "Breadcrumbs";

?>

<nav aria-label="breadcrumb">

    <ol class="breadcrumb">

        <li class="breadcrumb-item">

            <a href="index.php">
            Home
            </a>

        </li>

        <li class="breadcrumb-item">

            <a href="bootstrap.php">

            <?php echo $category; ?>

            </a>

        </li>

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

            <?php echo $page; ?>

        </li>

    </ol>

</nav>

Breadcrumb information can also come from database records in dynamic applications.

<?php

$course_name = "Bootstrap";
$lesson_name = "Breadcrumbs";

?>

<nav aria-label="breadcrumb">

    <ol class="breadcrumb">

        <li class="breadcrumb-item">

            <a href="courses.php">
            Courses
            </a>

        </li>

        <li class="breadcrumb-item">

            <a href="course.php">

            <?php
            echo $course_name;
            ?>

            </a>

        </li>

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

            <?php
            echo $lesson_name;
            ?>

        </li>

    </ol>

</nav>

When displaying database values in a real application, escape output appropriately before sending it to the browser.

Breadcrumbs work best when they accurately represent the site's content hierarchy.

For example:

Home
  ↓
Tutorials
  ↓
Bootstrap
  ↓
Components
  ↓
Breadcrumbs

This makes it easier for users to understand where they are within the website.

A tutorial website can display the course and lesson hierarchy.

<nav aria-label="breadcrumb">

    <ol class="breadcrumb">

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

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

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

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

        Lesson 29

        </li>

    </ol>

</nav>

Follow these practices when using Breadcrumbs:

• Keep the hierarchy clear.
• Use meaningful names.
• Make parent levels clickable when appropriate.
• Mark the current page with .active.
• Use aria-current="page" for the current page.
• Place Breadcrumbs near the page heading.
• Do not create unnecessarily deep Breadcrumb paths.
• Keep the navigation easy to understand.

Breadcrumbs are generally responsive by default, but very long hierarchies can become difficult to read on small screens.

Keep breadcrumb labels short and avoid unnecessary levels.

<nav aria-label="breadcrumb">

    <ol class="breadcrumb">

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

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

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

        Bootstrap

        </li>

    </ol>

</nav>

Accessibility is important when creating Breadcrumb navigation.

• Use a semantic <nav> element.
• Use aria-label="breadcrumb".
• Use aria-current="page" on the current item.
• Use descriptive link text.
• Do not rely only on color to identify the current page.
• Keep the hierarchy meaningful.

<nav aria-label="breadcrumb">

    <ol class="breadcrumb">

        <li class="breadcrumb-item">

            <a href="#">
            Home
            </a>

        </li>

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

            Current Page

        </li>

    </ol>

</nav>

Avoid these common mistakes when creating Breadcrumbs:

• Using Breadcrumbs without a meaningful hierarchy.
• Making the current page unnecessarily clickable.
• Forgetting aria-current="page".
• Using unclear link names.
• Adding too many hierarchy levels.
• Using Breadcrumbs as the only navigation system.
• Making Breadcrumb text unnecessarily long.
• Ignoring small-screen readability.

A course website can use Breadcrumbs to show the current course and lesson.

<nav aria-label="breadcrumb">

    <ol class="breadcrumb">

        <li class="breadcrumb-item">

            <a href="index.php">

            Home

            </a>

        </li>


        <li class="breadcrumb-item">

            <a href="tutorials.php">

            Tutorials

            </a>

        </li>


        <li class="breadcrumb-item">

            <a href="bootstrap.php">

            Bootstrap

            </a>

        </li>


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

            Breadcrumbs

        </li>

    </ol>

</nav>

This complete example shows a practical Breadcrumb navigation for a Bootstrap tutorial page.

<nav
aria-label="breadcrumb">

    <ol class="breadcrumb">


        <li
        class="breadcrumb-item">

            <a
            href="index.php">

            Home

            </a>

        </li>


        <li
        class="breadcrumb-item">

            <a
            href="tutorials.php">

            Tutorials

            </a>

        </li>


        <li
        class="breadcrumb-item">

            <a
            href="bootstrap.php">

            Bootstrap

            </a>

        </li>


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

            Breadcrumbs

        </li>


    </ol>

</nav>