Stylish and Functional Breadcrumb Navigation with HTML and CSS

Discover a modern HTML & CSS breadcrumb snippet with a custom background and responsive design. Perfect for enhancing website navigation and user experience.

HTML

CSS

@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap");
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#breadcrumb-1 {
    background: url(https://freewebsnippets.com/public/frontend/snippet_img/banner-1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding: 150px 0;
    font-family: "Dosis", sans-serif;
}
#breadcrumb-1::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    pointer-events: none;
}
#breadcrumb-1 .content {
    color: #fff;
    z-index: 1;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#breadcrumb-1 .content h2 {
    margin: 0;
    font-size: 40px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 500;
}
#breadcrumb-1 .content p {
    margin: 0;
    font-size: 16px;
    text-transform: capitalize;
}
#breadcrumb-1 .content ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex: 0 0 250px;
    justify-content: flex-end;
}
#breadcrumb-1 .content ul li {
    margin: 0 5px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 14px;
}
#breadcrumb-1 .content ul li a {
    color: #fff;
    text-decoration: none;
    transition: all 0.4s;
}
#breadcrumb-1 .content ul li a:hover {
    color: brown;
}
.container {
    margin-right: auto;
    margin-left: auto;
    padding: 0 1.5rem;
}
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}
@media (max-width: 768px) {
    #breadcrumb-1 .content {
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
    }
    #breadcrumb-1 .content ul {
        flex: auto;
        margin-top: 30px;
    }
    #breadcrumb-1 .content ul li:first-child {
        margin-left: 0;
    }
    #breadcrumb-1 .content h2 {
        margin-bottom: 30px;
        font-size: 30px;
    }
    #breadcrumb-1 {
        padding: 100px 0;
    }
}

JS

Width:

Height:

Improve your website's navigation with this stylish breadcrumb design, crafted using HTML and CSS. Featuring a full-width background image and a semi-transparent overlay, this breadcrumb navigation offers clear and accessible links for easy site navigation. The design adapts to various screen sizes with responsive styling, ensuring an optimal user experience across devices. Breadcrumbs are an essential UI component that enhances user orientation and site structure visibility. Customize this snippet to fit your website's theme and improve the overall user experience by providing a clear path for users to trace their navigation history.