Modern Breadcrumb Navigation with Icons and Responsive Design

Discover a stylish HTML & CSS breadcrumb snippet featuring icons and a responsive layout. Ideal for improving navigation and user experience on your website.

HTML

CSS

@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#breadcrumb-3 {
    background: #e9ecf5;
    position: relative;
    padding: 150px 0;
    font-family: "Rubik", sans-serif;
}
#breadcrumb-3 .content {
    color: #000;
    text-align: left;
    position: relative;
    z-index: 1;
}
#breadcrumb-3 .content h2 {
    font-size: 50px;
    font-weight: 400;
    letter-spacing: 5px;
    margin-bottom: 15px;
    margin-top: 0;
}
#breadcrumb-3 .content ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
}
#breadcrumb-3 .content ul li {
    margin: 0 5px;
    color: #333;
    font-size: 16px;
}
#breadcrumb-3 .content ul li a {
    color: #333;
    text-decoration: none;
    transition: all 0.4s;
}
#breadcrumb-3 .content ul li a:hover {
    color: #056ee5;
}
.container {
    max-width: 1320px;
    padding: 0 1.5rem;
    margin: 0 auto;
}
@media (max-width: 1400px) {
    .container {
        max-width: 1140px;
    }
}
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
}
@media (max-width: 992px) {
    .container {
        max-width: 720px;
    }
}
@media (max-width: 768px) {
    .container {
        max-width: 540px;
    }
    #breadcrumb-3 {
        padding: 100px 0;
    }
}
@media (max-width: 576px) {
    .container {
        max-width: 100%;
    }
    #breadcrumb-3 .content h2 {
        font-size: 40px;
        letter-spacing: 3px;
        margin-bottom: 10px;
    }
    #breadcrumb-3 {
        padding: 70px 0;
    }
}

JS

Width:

Height:

Improve your website's navigation with this modern breadcrumb design using HTML and CSS. Featuring a clean, responsive layout and intuitive icons, this breadcrumb navigation ensures users can easily track their path through your site. The background color and font choices create a visually appealing and accessible interface. The design adapts well to various screen sizes, making it suitable for both desktop and mobile views. The hover effect on links adds an interactive touch, enhancing usability and engagement. Customize the text and colors to align with your branding while providing a user-friendly navigation solution.