Bootstrap Breadcrumbs

Breadcrumbs are a vital form of web navigation. They indicate the current page's location within a massive hierarchical website structure (like a shopping cart or a deep documentation forum).

Thanks to Bootstrap 5, creating breadcrumbs with automatic separators natively generated via CSS is completely effortless.

1. Standard Breadcrumbs

To ensure perfect accessibility, you must wrap a standard Ordered List (<ol>) inside of an HTML5 <nav aria-label="breadcrumb"> tag.

Just like standard pagination, there are three classes you need to remember:

• .breadcrumb applied directly to the <ol> list tag.
• .breadcrumb-item applied to each <li> node.
• .active applied to the very last node to highlight the user's current exact location physically. Make sure to embed aria-current="page" on that active tag.

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <!-- Notice we don't code the dashes manually! -->
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        
        <!-- The final node is Active -->
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>

2. Changing the Divider CSS Variable

Bootstrap 5 introduced a deeply powerful CSS Variables engine built directly into its core logic.

If you don't like the standard forward-slash (/) divider, you can instantly change it by overriding the --bs-breadcrumb-divider variable directly inline inside the <nav> tag!

Angled Bracket Divider

The most popular alternative to the forward-slash is the simple angled bracket (>). Notice how we wrap the > literally inside quotation marks within the inline style below.

<!-- Overriding the variable directly inside the nav tag -->
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
    </ol>
</nav>

Absolute Empty Divider

If you simply want an empty space between your links instead of a character, you can inject a zero-length string ('') right into the exact same variable logic.

<!-- Erasing the divider completely -->
<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
    <ol class="breadcrumb">...</ol>
</nav>