Learn how to design an eye-catching breadcrumb navigation for your website using CSS & HTML. Follow our step-by-step guide to improve user experience.
Table of Contents
Breadcrumb Navigation is a crucial element of web design, providing users with an easy and intuitive way to navigate through a website. It is essential for improving user experience and keeping visitors engaged on your site. In this post, we'll show you how to create an eye-catching breadcrumb navigation in CSS & HTML.
Let's start making these amazing breadcrumb navigation Using HTML & CSS step by step.
Designing breadcrumb navigation is relatively simple, and it's a great way to enhance the overall look and feel of your website. Here's a step-by-step guide to creating breadcrumb navigation in HTML & CSS.
Join My Telegram Channel to Download the Project: Click Here
Source Code
Step 1 (HTML Code):
The first step is to determine the hierarchy of the pages on your website. This information will help you structure your breadcrumb navigation correctly, ensuring that users can easily find their way around your site.
Next, you need to create an unordered list in HTML to represent the breadcrumb navigation. This list should be structured in a way that reflects the hierarchy of the pages on your website.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our breadcrumb navigation using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the breadcrumb navigation is in place, the next step is to add styling to the breadcrumb navigation using CSS. CSS allows us to control the visual appearance of the breadcrumb navigation, including things like layout, color, and typography.
Next, we will create our CSS file. We will use some basic CSS rules in this file to create our breadcrumb navigation. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our breadcrumb navigation an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body {
font-family: 'Lato', sans-serif;
font-size: 16px;
}
.back {
position: fixed;
top: 40px;
left: 40px;
width: 100px;
}
.back ul {
display: block;
margin-bottom: 0;
list-style: none;
}
.back ul li {
white-space: nowrap;
}
.back ul li a {
text-decoration: none;
}
.back ul.nav-history {
padding-left: 36px;
padding-top: 25px;
pointer-events: none;
}
.back ul.nav-history li {
margin-bottom: 5px;
}
.back ul.nav-history li::after {
content: '';
position: absolute;
left: 12px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #e8eaed;
transform: scale(0.9);
transition: all 0.2s ease;
}
.back ul.nav-history li:not(:last-child)::before {
content: '';
position: absolute;
left: 17px;
margin-top: 10px;
width: 2px;
height: 28px;
background: #e8eaed;
transition: all 0.2s ease;
}
.back ul.nav-history li.active {
pointer-events: none;
}
.back ul.nav-history li.active::after {
background: #e8eaed;
}
.back ul.nav-history li.active a {
color: #5a667f;
}
.back ul.nav-history li a {
color: #418ad8;
display: inline-block;
opacity: 0;
transform: translateY(-10px);
transition: all 0.2s ease;
}
.back ul.nav-history li a:hover {
color: #2b7cd2;
}
.back ul.nav-links {
position: absolute;
transform: translateY(-10px);
margin-top: 20px;
padding-left: 12px;
opacity: 0;
transition: all 0.2s ease;
pointer-events: none;
}
.back ul.nav-links li:not(:last-child) {
margin-bottom: 5px;
}
.back ul.nav-links li a {
font-size: 14px;
font-weight: 600;
color: #c8ccd4;
transition: color 0.2s ease;
}
.back ul.nav-links li a:hover {
color: #9098a9;
}
.back:hover {
width: auto;
}
.back:hover .menu-back {
opacity: 1;
transform: translateY(0);
}
.back:hover .btn-back div {
background: rgba(65,138,216,0.25);
}
.back:hover .btn-back div svg path,
.back:hover .btn-back div svg polyline {
stroke: #418ad8;
}
.back:hover .btn-back span {
transform: translateX(0);
opacity: 1;
}
.back:hover ul.nav-history {
transform: translateY(0);
pointer-events: auto;
}
.back:hover ul.nav-history li {
margin-bottom: 8px;
}
.back:hover ul.nav-history li::after {
background: #418ad8;
transform: translateY(6px);
}
.back:hover ul.nav-history li.active::after {
background: #5a667f;
}
.back:hover ul.nav-history li a {
opacity: 1;
transform: translateY(0);
}
.back:hover ul.nav-links {
position: relative;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.btn-back {
display: inline-block;
}
.btn-back div {
position: relative;
z-index: 1;
width: 36px;
height: 36px;
border-radius: 50%;
background: #e8eaed;
float: left;
}
.btn-back div svg {
fill: none;
transform: translate(10px, 7px);
}
.btn-back div svg path,
.btn-back div svg polyline {
stroke: #9098a9;
stroke-width: 2;
stroke-linejoin: round;
stroke-linecap: round;
}
.btn-back span {
display: inline-block;
color: #418ad8;
margin-left: 10px;
line-height: 34px;
opacity: 0;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.btn-back:hover span {
color: #2b7cd2;
} Final Output:
Conclusion:
In conclusion, creating eye-catching breadcrumb navigation with CSS and HTML can significantly improve user experience and the overall design of your website. Use this guide to create stylish and functional breadcrumb navigation for your site.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
