Custom Bootstrap 5 Breadcrumbs

Abstract: We are presenting code (CSS) for custom Bootstrap 5 breadcrumbs. This is an improved version of the previously published article.

1. The need for better Breadcrumbs – ver 3

This is a continuation of the article- Custom Bootstrap 5 Breadcrumbs -Ver 2

I will not repeat what was explained previously. Just continue to improve the code.

1.1. Problems with Bootstrap Themes

The problem with ver2 was that it had hardcoded colors. The colors were taken from Bootstrap 5, so they match the original colors. But, if the user decides to apply Bootstrap Theme, a new color palate will not be applied to this Breadcrumbs library. We decided to improve on that one.

The idea is to try to fetch global Bootstrap color CSS variables, apply them in this library CSS, and provide defaults if the original Bootstrap was not found.

2. New solution

Here is the new CSS file.

/* breadcrumb3.css */
/* by [email protected], 
   using partly code from [email protected]  */

.breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm {
    /* Assigning CSS variable --_bs-primary used in this library */
    --_bs-primary: var(--bs-primary, #0d6efd);
    --_bs-secondary: var(--bs-secondary, #6c757d);
    --_bs-success: var(--bs-success, #198754);
    --_bs-info: var(--bs-info, #0dcaf0);
    --_bs-warning: var(--bs-warning, #ffc107);
    --_bs-danger: var(--bs-danger, #dc3545);
    --_bs-light: var(--bs-light, #f8f9fa);
    --_bs-dark: var(--bs-dark, #212529);
    --_bs-gray: var(--bs-gray, #6c757d);
    --_bs-white: white;
    --_bs-black: black;

    /* Changeable colors */
    --_bgcolor: var(--_bs-info);
    --_color: var(--_bs-black);
    --_arrowbordercolor: var(--_bs-gray);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-white);
}

@media (max-width: 767px) {
    /* Making it responsive, using CSS Flexbox with column (vertical) direction */
    .breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm {
        display: flex;
        flex-direction: column;
    }

    .breadcrumb3-lg .breadcrumb3-item {
        width: 80%;
        border-radius: 4px 0 0 4px;
        padding-left: 25px;
    }

    .breadcrumb3-md .breadcrumb3-item {
        width: 80%;
        border-radius: 3px 0 0 3px;
        padding-left: 20px;
    }

    .breadcrumb3-sm .breadcrumb3-item {
        width: 80%;
        border-radius: 3px 0 0 3px;
        padding-left: 18px;
    }
}

/* Large size breadcrumb3-item -----------------------------------*/
.breadcrumb3-item {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    color: var(--_color);
    background-color: var(--_bgcolor);
    height: 40px;
    line-height: 18px;
    font-size: 18px;
    text-align: center;
    padding-right: 10px;
    padding-left: 25px;
    text-decoration: none;
}

.breadcrumb3-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.breadcrumb3-icon {
    display: table-cell;
    text-align: center;
    line-height: 25px;
    font-size: 25px;
    padding-right: 10px;
    vertical-align: middle;
}

.breadcrumb3-item:first-child {
    border-radius: 4px 0 0 4px;
    padding-left: 15px;
}

.breadcrumb3-item:before,
.breadcrumb3-item:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    position: absolute;
    margin-top: -20px;
    border-bottom: 20px solid transparent;
    left: 100%;
    top: 50%;
}

/* Create edge on arrow with gray arrow in background */
.breadcrumb3-item:after {
    border-left: 15px solid var(--_arrowbordercolor);
    margin-left: 1px;
    z-index: 2;
}

/* Arrow itself, overwriting gray arrow */
.breadcrumb3-item:before {
    border-left: 15px solid var(--_bgcolor);
    margin-left: 0px;
    z-index: 3;
}

.breadcrumb3-item:hover:not(.no-hover-effect),
.breadcrumb3-item:focus:not(.no-hover-effect) {
    background-color: var(--_hover-bgcolor);
    color: var(--_hover-color);
}

.breadcrumb3-item:hover:not(.no-hover-effect):before,
.breadcrumb3-item:focus:not(.no-hover-effect):before {
    border-left-color: var(--_hover-bgcolor);
}

/* Remove keyboard navigation focus rectangle */
.breadcrumb3-item:focus-visible {
    outline: none;
}

/* Medium size breadcrumb3-item -----------------------------------*/
.breadcrumb3-md .breadcrumb3-item {
    height: 32px;
    line-height: 15px;
    font-size: 15px;
    padding-left: 20px;
}

.breadcrumb3-md .breadcrumb3-icon {
    line-height: 20px;
    font-size: 20px;
    padding-right: 7px;
}

.breadcrumb3-md .breadcrumb3-item:first-child {
    border-radius: 3px 0 0 3px;
    padding-left: 12px;
}

/* Gray arrow in background */
.breadcrumb3-md .breadcrumb3-item:after {
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 12px solid var(--_arrowbordercolor);
    margin-top: -16px;
    margin-left: 1px;
}

/* Arrow itself */
.breadcrumb3-md .breadcrumb3-item:before {
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 12px solid var(--_bgcolor);
    margin-top: -16px;
}

/* Small size breadcrumb3-item-sm -----------------------------------*/
.breadcrumb3-sm .breadcrumb3-item {
    height: 24px;
    line-height: 11px;
    font-size: 11px;
    padding-right: 8px;
    padding-left: 18px;
}

.breadcrumb3-sm .breadcrumb3-icon {
    line-height: 16px;
    font-size: 16px;
    padding-right: 5px;
}

.breadcrumb3-sm .breadcrumb3-item:first-child {
    border-radius: 3px 0 0 3px;
    padding-left: 10px;
}

/* Gray arrow in background */
.breadcrumb3-sm .breadcrumb3-item:after {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 8px solid var(--_arrowbordercolor);
    margin-top: -12px;
    margin-left: 1px;
}

/* Arrow itself */
.breadcrumb3-sm .breadcrumb3-item:before {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 8px solid var(--_bgcolor);
    margin-top: -12px;
}

/* breadcrumb3-item colors ------------------------------------------*/
.breadcrumb3-lg .info, .breadcrumb3-md .info, .breadcrumb3-sm .info {
    --_color: var(--_bs-black);
    --_bgcolor: var(--_bs-info);
    --_arrowbordercolor: var(--_bs-gray);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-white);
}

.breadcrumb3-lg .primary, .breadcrumb3-md .primary, .breadcrumb3-sm .primary {
    --_color: var(--_bs-white);
    --_bgcolor: var(--_bs-primary);
    --_arrowbordercolor: var(--_bs-gray);
    --_hover-bgcolor: var(--_bs-success);
    --_hover-color: var(--_bs-white);
}

.breadcrumb3-lg .warning, .breadcrumb3-md .warning, .breadcrumb3-sm .warning {
    --_color: var(--_bs-black);
    --_bgcolor: var(--_bs-warning);
    --_arrowbordercolor: var(--_bs-gray);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-white);
}

.breadcrumb3-lg .success, .breadcrumb3-md .success, .breadcrumb3-sm .success {
    --_color: var(--_bs-black);
    --_bgcolor: var(--_bs-success);
    --_arrowbordercolor: var(--_bs-gray);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-white);
}

.breadcrumb3-lg .secondary, .breadcrumb3-md .secondary, .breadcrumb3-sm .secondary {
    --_color: var(--_bs-white);
    --_bgcolor: var(--_bs-secondary);
    --_arrowbordercolor: var(--_bs-gray);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-white);
}

.breadcrumb3-lg .light, .breadcrumb3-md .light, .breadcrumb3-sm .light {
    --_color: var(--_bs-black);
    --_bgcolor: var(--_bs-light);
    --_arrowbordercolor: var(--_bs-gray);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-white);
}

.breadcrumb3-lg .danger, .breadcrumb3-md .danger, .breadcrumb3-sm .danger {
    --_color: var(--_bs-white);
    --_bgcolor: var(--_bs-danger);
    --_arrowbordercolor: var(--_bs-gray);
    --_hover-bgcolor: var(--_bs-primary);
    --_hover-color: var(--_bs-white);
}

And demo HTML hasn’t changed much; it can only optionally load bootstrap original CSS.

<!DOCTYPE html>
<html>

<head>
    <!--<link rel="stylesheet" href="bootstrap_original.css" />-->
    <link rel="stylesheet" href="bootstrap-theme-flatly.css" />
    <link rel="stylesheet" href="breadcrumb3.css" />
    <!-- Download bootstrap icons from https://icons.getbootstrap.com/#install  
         and install -->
    <link rel="stylesheet" href="bootstrap-icons-1.11.3\font\bootstrap-icons.min.css" />
</head>

<body>
    <!-- Large size --------------------------------------------------------------->
    <H5>Large size, info case</H5>
    <div class="breadcrumb3-lg">
        <a href="#" class="breadcrumb3-item info">Accounts</a>
        <a href="#" class="breadcrumb3-item info">Account number</br>123456</a>
        <a href="#" class="breadcrumb3-item primary">Details</a>
    </div>

    <H5>Large size, info case, with no hover effect on the last button</H5>
    <div class="breadcrumb3-lg">
        <a href="#" class="breadcrumb3-item info">Contracts</a>
        <a href="#" class="breadcrumb3-item info">Contract number</br>99999-2024</a>
        <a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
    </div>

    <H5>Large size, Rainbow</H5>
    <div class="breadcrumb3-lg">
        <a href="#" class="breadcrumb3-item info">Breadcrumb</br>info</a>
        <a href="#" class="breadcrumb3-item primary">Breadcrumb</br>primary</a>
        <a href="#" class="breadcrumb3-item warning">Breadcrumb</br>warning</a>
        <a href="#" class="breadcrumb3-item success">Breadcrumb</br>success</a>
        <a href="#" class="breadcrumb3-item secondary">Breadcrumb</br>secondary</a>
        <a href="#" class="breadcrumb3-item light">Breadcrumb</br>light</a>
        <a href="#" class="breadcrumb3-item danger">Breadcrumb</br>danger</a>
    </div>

    <H5>Large size, icons usage</H5>
    <div class="breadcrumb3-lg">
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-people-fill"></i></span>
            <span class="breadcrumb3-text">Users</span>
        </a>
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-person-fill"></i></span>
            <span class="breadcrumb3-text">User number</br>123456</span>
        </a>
        <a href="#" class="breadcrumb3-item primary">
            <span class="breadcrumb3-icon"><i class="bi bi-info-circle-fill"></i></span>
            <span class="breadcrumb3-text">Details</span>
        </a>
    </div>

    <!-- Medium size --------------------------------------------------------------->
    <H5>Medium size, info case</H5>
    <div class="breadcrumb3-md">
        <a href="#" class="breadcrumb3-item info">Accounts</a>
        <a href="#" class="breadcrumb3-item info">Account number</br>123456</a>
        <a href="#" class="breadcrumb3-item primary">Details</a>
    </div>

    <H5>Medium size, info case, with no hover effect on the last button</H5>
    <div class="breadcrumb3-md">
        <a href="#" class="breadcrumb3-item info">Contracts</a>
        <a href="#" class="breadcrumb3-item info">Contract number</br>99999-2024</a>
        <a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
    </div>

    <H5>Medium size, Rainbow</H5>
    <div class="breadcrumb3-md">
        <a href="#" class="breadcrumb3-item info">Breadcrumb</br>info</a>
        <a href="#" class="breadcrumb3-item primary">Breadcrumb</br>primary</a>
        <a href="#" class="breadcrumb3-item warning">Breadcrumb</br>warning</a>
        <a href="#" class="breadcrumb3-item success">Breadcrumb</br>success</a>
        <a href="#" class="breadcrumb3-item secondary">Breadcrumb</br>secondary</a>
        <a href="#" class="breadcrumb3-item light">Breadcrumb</br>light</a>
        <a href="#" class="breadcrumb3-item danger">Breadcrumb</br>danger</a>
    </div>

    <H5>Medium size, icons usage</H5>
    <div class="breadcrumb3-md">
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-people-fill"></i></span>
            <span class="breadcrumb3-text">Users</span>
        </a>
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-person-fill"></i></span>
            <span class="breadcrumb3-text">User number</br>123456</span>
        </a>
        <a href="#" class="breadcrumb3-item primary">
            <span class="breadcrumb3-icon"><i class="bi bi-info-circle-fill"></i></span>
            <span class="breadcrumb3-text">Details</span>
        </a>
    </div>

    <!-- Small size --------------------------------------------------------------->
    <H5>Small size, info case</H5>
    <div class="breadcrumb3-sm">
        <a href="#" class="breadcrumb3-item info">Accounts</a>
        <a href="#" class="breadcrumb3-item info">Account number</br>123456</a>
        <a href="#" class="breadcrumb3-item primary">Details</a>
    </div>

    <H5>Small size, info case, with no hover effect on the last button</H5>
    <div class="breadcrumb3-sm">
        <a href="#" class="breadcrumb3-item info">Contracts</a>
        <a href="#" class="breadcrumb3-item info">Contract number</br>99999-2024</a>
        <a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
    </div>

    <H5>Small size, Rainbow</H5>
    <div class="breadcrumb3-sm">
        <a href="#" class="breadcrumb3-item info">Breadcrumb</br>info</a>
        <a href="#" class="breadcrumb3-item primary">Breadcrumb</br>primary</a>
        <a href="#" class="breadcrumb3-item warning">Breadcrumb</br>warning</a>
        <a href="#" class="breadcrumb3-item success">Breadcrumb</br>success</a>
        <a href="#" class="breadcrumb3-item secondary">Breadcrumb</br>secondary</a>
        <a href="#" class="breadcrumb3-item light">Breadcrumb</br>light</a>
        <a href="#" class="breadcrumb3-item danger">Breadcrumb</br>danger</a>
    </div>

    <H5>Small size, icons usage</H5>
    <div class="breadcrumb3-sm">
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-people-fill"></i></span>
            <span class="breadcrumb3-text">Users</span>
        </a>
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-person-fill"></i></span>
            <span class="breadcrumb3-text">User number</br>123456</span>
        </a>
        <a href="#" class="breadcrumb3-item primary">
            <span class="breadcrumb3-icon"><i class="bi bi-info-circle-fill"></i></span>
            <span class="breadcrumb3-text">Details</span>
        </a>
    </div>
</body>

</html>

3. Final Result

3.1. Default, without Bootstrap theme

Here is the resulting rendering, without any Bootstrap theme, with default colors.

Bootstrap theme

3.2. With the default Bootstrap theme

Here is the resulting rendering with the default Bootstrap theme.

Default theme

3.3. With a custom Bootstrap theme

Here is the resulting rendering with some custom Bootstrap themes. This component, Breadcrumbs, inherits the color scheme from the custom Bootstrap theme.

Custom Bootstrap themes

4. References

[1] https://icons.getbootstrap.com/#install