Modern Breadcrumb Navigation for Enhanced Usability

Explore a stylish HTML & CSS breadcrumb snippet with icons and a modern design. Perfect for enhancing navigation on your website with a sleek, responsive look.

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-4{
     background: url(https://freewebsnippets.com/public/frontend/snippet_img/banner-2.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     position: relative;
     padding: 150px 0;
     font-family: "Rubik", sans-serif;
}
 #breadcrumb-4::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     pointer-events: none;
}
 #breadcrumb-4 .content{
     color: #fff;
     text-align: left;
}
 #breadcrumb-4 .content h2{
     font-size: 70px;
     font-weight: 400;
     letter-spacing: 5px;
     margin-bottom: 15px;
     margin-top: 0;
     position: relative;
     z-index: 1;
     text-align: center;
}
 #breadcrumb-4 .content ul{
     margin: 0;
     padding: 0;
     list-style: none;
     display: flex;
     justify-content: flex-start;
     position: absolute;
     bottom: -30px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1;
     background: #333;
     padding: 20px 30px;
     width: max-content;
}
 #breadcrumb-4 .content ul li{
     margin: 0 7px;
     color: #fff;
     font-size: 16px;
     font-weight: 600;
}
 #breadcrumb-4 .content ul li i{
     font-size: 10px;
     vertical-align: middle;
}
 #breadcrumb-4 .content ul li a{
     color: #fff;
     text-decoration: none;
     transition: all .4s;
     color: #ff2c60;
}
 .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-4{
         padding: 100px 0;
    }
}
 @media (max-width: 576px){
     .container{
         max-width: 100%;
    }
     #breadcrumb-4 .content h2{
         font-size: 40px;
         letter-spacing: 3px;
         margin-bottom: 10px;
    }
     #breadcrumb-4{
         padding: 70px 0;
    }
     #breadcrumb-4 .content ul{
         padding: 20px;
    }
}

JS

Width:

Height:

Enhance your website with our modern breadcrumb snippet, designed to offer a sleek and user-friendly navigation solution. Featuring a stylish layout and responsive design, this snippet adjusts seamlessly across all devices. It helps users easily track their location within your site, improving navigation and overall user experience. Ideal for any website, it combines aesthetic appeal with practical functionality to provide a polished and intuitive browsing experience. Perfect for modern sites looking to streamline navigation while maintaining a sophisticated look, this breadcrumb navigation is an essential tool for improving site usability and structure.