Bootstrap UI Kit

Basic Breadcrumb

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

<style>
    .breadcrumb {
        background: transparent;
        padding: 0;
        margin: 0;
        font-size: 0.85rem;
    }
    .breadcrumb-item + .breadcrumb-item::before {
        content: "/";
        color: #cbd5e1;
        padding: 0 0.5rem;
    }
    .breadcrumb-item a {
        color: #64748b;
        text-decoration: none;
        transition: color 0.15s;
    }
    .breadcrumb-item a:hover {
        color: #1e3a8a;
    }
    .breadcrumb-item.active {
        color: #0b1b2f;
        font-weight: 600;
    }
</style>

Chevron Breadcrumb

<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-chevron">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Products</a></li>
        <li class="breadcrumb-item"><a href="#">Electronics</a></li>
        <li class="breadcrumb-item active" aria-current="page">Headphones</li>
    </ol>
</nav>

<style>
    .breadcrumb-chevron .breadcrumb-item + .breadcrumb-item::before {
        content: "›";
        font-size: 1.1rem;
        color: #cbd5e1;
        padding: 0 0.5rem;
    }
</style>

Icon Breadcrumb

<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-icons">
        <li class="breadcrumb-item">
            <a href="#"><i class="fas fa-home"></i> Home</a>
        </li>
        <li class="breadcrumb-item">
            <a href="#"><i class="fas fa-user"></i> Account</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <i class="fas fa-cog"></i> Settings
        </li>
    </ol>
</nav>

<style>
    .breadcrumb-icons .breadcrumb-item a,
    .breadcrumb-icons .breadcrumb-item.active {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .breadcrumb-icons .breadcrumb-item i {
        font-size: 0.75rem;
        color: #94a3b8;
    }
    .breadcrumb-icons .breadcrumb-item.active i {
        color: #1e3a8a;
    }
</style>

Pill Breadcrumb

<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-pill">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active">Data</li>
    </ol>
</nav>

<style>
    .breadcrumb-pill {
        background: #f1f5f9;
        border-radius: 999px;
        padding: 0.5rem 1rem;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }
    .breadcrumb-pill .breadcrumb-item + .breadcrumb-item::before {
        content: "›";
        color: #94a3b8;
        padding: 0 0.5rem;
    }
    .breadcrumb-pill .breadcrumb-item a {
        color: #475569;
        text-decoration: none;
        font-weight: 500;
    }
    .breadcrumb-pill .breadcrumb-item a:hover {
        color: #1e3a8a;
    }
    .breadcrumb-pill .breadcrumb-item.active {
        color: #1e3a8a;
        font-weight: 700;
    }
</style>

Breadcrumb with Dropdown

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="#"><i class="fas fa-home"></i></a>
        </li>
        <li class="breadcrumb-item">
            <div class="dropdown d-inline">
                <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
                    Categories
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Electronics</a></li>
                    <li><a class="dropdown-item" href="#">Fashion</a></li>
                    <li><a class="dropdown-item" href="#">Books</a></li>
                </ul>
            </div>
        </li>
        <li class="breadcrumb-item active" aria-current="page">Wireless Headphones</li>
    </ol>
</nav>

Breadcrumbs