Create an Eye-catching Breadcrumb Navigation in CSS with HTML

Faraz

By Faraz - Last Updated:

Learn how to design an eye-catching breadcrumb navigation for your website using CSS and HTML.

Join us on Telegram
how to create breadcrumb navigation using HTML and CSS.png
Read AlsoStep-by-step Guide Creating a Customizable Star Rating Concept using HTML and CSS.jpgStep-by-step Guide: Creating a Customizable Star Rating Concept using HTML and CSS

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Conclusion
  5. Preview

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 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):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our breadcrumb navigation. Here’s a detailed breakdown of each part:

1. DOCTYPE and Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
  • <!DOCTYPE html>: Declares the document type to be HTML5.
  • <html lang="en">: The lang attribute indicates the language used in the document (English in this case).

2. Head Section

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    <title>Breadcrumb Navigation</title>
</head>
  • <meta charset="UTF-8">: Ensures the document uses UTF-8 encoding, which supports most characters.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">: Ensures the webpage is displayed using the latest rendering engine in Internet Explorer.
  • <meta name="viewport"...: Ensures the page is responsive on different devices by controlling the layout based on screen size.
  • <link rel="stylesheet"...: Links the external CSS file (styles.css) for styling.
  • <title>: Sets the title of the webpage to "Breadcrumb Navigation" (appears on the browser tab).

3. Body Section

<body>
    <div class="back">
  • <div class="back">: A container for the back button and navigation menus.

4. Back Button Structure

<a href="#" class="btn-back">
  <div>
    <svg width="16px" height="14px" viewBox="0 0 16 14">
      <path d="M1,7 L15,7"></path>
      <polyline points="7 1 1 7 7 13"></polyline>
    </svg>
  </div>
  <span>Back</span>
</a>
  • <a href="#" class="btn-back">: A hyperlink styled as a "Back" button.
  • SVG Icon:
    • Creates a small arrow icon using SVG (Scalable Vector Graphics).
    • <path> and <polyline> draw the horizontal line and the arrowhead.

5. Breadcrumb Navigation (Menu History)

<div class="menu-back">
  <ul class="nav-history">
    <li><a href="#">Home</a></li>
    <li><a href="#">Components</a></li>
    <li class="active"><a href="#">Pure CSS Breadcrumb</a></li>
  </ul>
  • <div class="menu-back">: Wraps the menu.
  • <ul class="nav-history">: An unordered list showing breadcrumb navigation.
    • The <li class="active"> highlights the current page (Pure CSS Breadcrumb).

6. Additional Links Section

<ul class="nav-links">
  <li><a href="#">Blog</a></li>
  <li><a href="#">Terms and Conditions</a></li>
  <li><a href="#">Contact</a></li>
</ul>
  • <ul class="nav-links">: Another unordered list with links to secondary pages, such as "Blog," "Terms and Conditions," and "Contact."

7. Closing Tags

</div>
</body>
</html>
  • Closes all the opened tags and completes the HTML structure.

This is the basic structure of our breadcrumb navigation using HTML, and now we can move on to styling it using CSS.

Read AlsoCreating a Notes App with HTML, Bootstrap, and JavaScript.jpgCreating a Notes App with HTML, Bootstrap, and JavaScript

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.

Next, we will create our CSS file. We will use some basic CSS rules in this file to create our breadcrumb navigation.

Let’s break down the CSS code step-by-step to understand how each section works:

1. Global Styles for body

body {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
}
  • Sets the font to 'Lato' with sans-serif as a fallback.
  • Sets the base font size to 16px for the entire page.

2. Container .back Styling

.back {
  position: fixed;
  top: 40px;
  left: 40px;
  width: 100px;
}
  • position: fixed;: Makes the back button stay at the same position even when the page is scrolled.
  • top and left: Positions it 40px from the top-left corner.
  • width: 100px;: Initial width (this will expand on hover).

3. Styling the Unordered Lists (<ul>) and List Items (<li>)

.back ul {
  display: block;
  margin-bottom: 0;
  list-style: none;
}
.back ul li {
  white-space: nowrap;
}
.back ul li a {
  text-decoration: none;
}
  • Removes the bullet points and sets the list display to block.
  • white-space: nowrap; prevents the text from wrapping onto the next line.
  • Removes the underline from links.

4. Breadcrumb History Styling (.nav-history)

.back ul.nav-history {
  padding-left: 36px;
  padding-top: 25px;
  pointer-events: none;
}
  • Adds padding to position the breadcrumb items.
  • pointer-events: none; makes the list non-interactive until the container is hovered.

History List Items Styling

.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;
}
  • Adds spacing between items.
  • The ::after pseudo-element creates a small circle (indicator) next to each item.
  • transform: scale(0.9);: Slightly shrinks the circle.
  • transition allows smooth animation when hovered.

Vertical Line Between Items (Except Last Item)

.back ul.nav-history li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  margin-top: 10px;
  width: 2px;
  height: 28px;
  background: #e8eaed;
}
  • ::before adds a vertical line to connect breadcrumb items.
  • This line is positioned next to the circles.

5. Link Styling and Active State

.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;
}
  • li.active styles the current breadcrumb item.
  • Links start with opacity: 0 and translateY(-10px) to create an animation effect when revealed.
  • On hover, the color changes smoothly due to the transition.

6. Menu Links Styling (.nav-links)

.back ul.nav-links {
  position: absolute;
  margin-top: 20px;
  padding-left: 12px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  pointer-events: none;
}
  • The menu links are hidden initially with opacity: 0.
  • When hovered, the list will slide down with a smooth transition.
  • pointer-events: none; disables interaction until the container is hovered.

7. Hover Effects on .back Container

.back:hover {
  width: auto;
}
.back:hover .menu-back {
  opacity: 1;
  transform: translateY(0);
}
.back:hover ul.nav-history li::after {
  background: #418ad8;
}
  • When the .back container is hovered, its width expands.
  • The menu and breadcrumb lists become visible, and the indicator circles turn blue.

8. Back Button Styling

.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 styles the "Back" button.
  • A circle with a background is created to hold the SVG icon.

SVG Icon Styling Inside the Button

.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;
}
  • SVG paths create the arrow icon.
  • The arrow is centered within the circle using transform.
  • The stroke color of the SVG is set to gray with rounded ends and joins.

9. Button Span Text Styling

.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;
  opacity: 1;
  transform: translateX(0);
}
  • The "Back" text next to the button starts hidden with opacity: 0.
  • On hover, the text slides into view with a smooth transition.

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:

how to create breadcrumb navigation using HTML and CSS.gif
Read AlsoCreating a Responsive Footer with Tailwind CSS.jpgCreating a Responsive Footer with Tailwind CSS (Source Code)

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 😊

Tags: breadcrumb navigation, css breadcrumb, css, html, eye-catching, website design, user experience, site hierarchy
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺