Create Breadcrumbs Navbar using HTML and CSS

Hey guys, Welcome to Our Blog, In Today’s Blog We Are Going to See How to Create a Breadcrumbs Navbar Using HTML and CSS. Before That, We Could See What This Breadcrumbs Navbar is About.

Breadcrumbs are a secondary navigation thing that helps users easily understand the relationship between their location on a page. The contents here we added are links that we used to navigate with the breadcrumb arrows.

So, Now Let’s Begin Creating Our Breadcrumbs Navbar Project by adding the Source Codes. and For That, here we are using HTML code first.

HTML Code For Breadcrumbs

<ul class="breadcrumbs">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>  
    <li><a href="">Clients</a></li>
    <li><a href="">Contact</a></li>
</ul>

Here we have used the unordered lists to place all the links inside of it. and it is given by a specific class name. Now we are adding the lists tag to add our contents as links using the anchor tag.

100+ Front-end Projects for Web developers (Source Code)

Now we closed the UL tag and our HTML for the Breadcrumbs Navbar is done. So, let’s make it attractive by adding CSS.

CSS Code For Breadcrumbs

.breadcrumbs {
margin: 200px 0 0;
padding: 60px;
background: rgba(244, 254, 220, 0.6);
display: block;
box-shadow: 0 2px 16px #333;
}
.breadcrumbs li {
display: inline-block;
}
.breadcrumbs li a {
position: relative;
font-size: 19px;
color: #333;
text-transform: uppercase;
padding-right: 20px;
margin-right: 10px;
text-decoration: none;
}
.breadcrumbs li a:after {
content: "";
width: 9px;
height: 8px;
border-top: 2px solid #555;
border-right: 2px solid #555;
position: absolute;
top: 6px;
right: 0;
transform: rotate(45deg);
display: block;
}
.breadcrumbs li:last-of-type a {
color: black;
font-weight: bold;
}
.breadcrumbs li:last-of-type a:after {
display: none;
}
body {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/landscape-tumblr-wallpaper-desktop-background.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
}

Now we have added our CSS code for styling. In this code, first we are adding the background image then make some adjustments in the background image by adding size, background repeat properties and we are fixing the background height to make it visible in entire web. These were done in the Body section.

body { 
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/landscape-tumblr-wallpaper-desktop-background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

In Second Part, we are adding and make alignments on the entire links inside unordered lists and after that, we specifically styled the links inside anchor tags by adding positions, text colors, font family, text decoration, margin, and padding.

Now, we are adding the after: property to perform some events on it after clicking or hovering. For that we are adding arrows in-between the links so it will be considered as the Breadcrumbs Navbar so for that arrow between these, we are fixing values for the width and height then (border X position) and (top X right) then lastly the transform animate property for the arrow to view in forwarding position which is considered as bread crumb and that is done by rotating (45deg) value. The specific code for the explanation.

.breadcrumbs {
    margin: 200px 0 0;
    padding: 60px;
    background: rgba(244, 254, 220, 0.6);
    display: block;
    box-shadow: 0 2px 16px #333;
    li {
      display: inline-block;
      a {
        position: relative;
        font-size: 19px;
        color: #333;
        text-transform: uppercase;
        padding-right: 20px;
        margin-right: 10px;
        text-decoration: none;
        &:after {
          content: "";
          width: 9px;
          height: 8px;
          border-top:2px solid #555;
          border-right:2px solid #555;
          position:absolute;
          top: 6px;
          right: 0;
          transform:rotate(45deg);
          display: block;
        }
      }

In this Last part, we are adding a specific line of code that makes the last link to be an active class. which means it has a specific background and text color to identify it has active here we use the property last-of-type for making it active by applying properties. That is done with this part of the code given below.

Build a Quiz App With HTML ,CSS and JavaScript

&:last-of-type a {
        color: black;
        font-weight: bold;
        &:after { display: none; }
      }
    }
  }

Now we have completed the CSS and also the project gets completed. Hence, we look our project preview from the given output section.

Final Output Of Breadcrumbs Navbar

Now We have Successfully created our Breadcrumbs Navbar Using HTML and CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

10+ Javascript Project Ideas For Beginners( Project Source Code)

If you find out this Blog helpful? Then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE – Eric Porter

WRITTEN BY – Ragunathan S