how to create breadcrumb navigation bar in html and css

Hello friends, today in this blog you will learn how to create breadcrumb navigation bar using html or CSS. You must have seen a lot of breadcrumb navigation bar which you have designed using JavaScript or j query. Today you will learn to create a beautiful breadcrumb navigation bar using html and CSS.

Breadcrumb navigation : You might know about the Breadcrumb navigation bar. It is generally used as a navigation aid in the web page for the uses it uses. It allows you to keep your location alert inside the website. You can see in the image which is a Breadcrumb navigation bar which has been created using html and CSS.

You can see in this image two Breadcrumb navigation bar is designed in different colors, it is designed with navigation bar only html or CSS, hover effect is there when you move the mouse over it, you can easily make this navigation bar Can make For this, you should only know html and CSS.

If you are having difficulties in understanding this, then you can understand by watching the video of this Breadcrumb navigation bar, which we have given below the tutorial of the video, you can click on it.

Video Tutorial of breadcrumb navigation bar

I hope you liked this Breadcrumb navigation bar. As you saw in this video. It is designed using a simple html or CSS codding. I mean to say that only html or CSS has been designed.

Breadcrumb Navigation Bar In Html And CSS Source Codes

First of all we know about the html code of breadcrumb navigation bar. We have taken two div inside div tag. GK class name is breadcrumb and inside these two four a tag is taken. A tag is used for anchor tag. Is and this is the inline element tag. It is used for the link and a class name is written inside the first a tag whose name is active. All these anchor tags have a menu name written inside it which is named Browse, Compare , Order Confirmation and Checkout is written

Now all these tags are aware of the style of css. We have zeroed the margin and padding to * but this means that the entire page has zeroed out the extra space, followed by the body tag height 100vh, text-align: center. ;, padding-top: 300px ;, background: # 689976;, background: linear-gradient (# 689976, #ACDACC); And font-family: 'Merriweather sans' arial, verdana; Styled by giving

After this breadcrumb is displayed: inline-block; Done means that the class breadcrumb has completely blocked that line followed by box-shadow: 0 0 15px 1px # 00000059 ;, overflow: hidden ;, border-radius: 5px; And counter-reset: flag; Given which you see in the image is navbar below each other, similarly all other tags and classes are designed by giving the property of css.

This navigation bar is not given the size by giving a size in the @ media screen, so you cannot easily see it in the mobile tab, if you want to respond to it, you can use it @ media screen to tag each tag according to each device. You can design and style in every device

If you like the Breadcrumb navigation bar, you can get the source code of this Breadcrumb, to get it, it has to be down and two files are given, one is the html code file and the other is the CSS code file by copying this source file to your file. Paste into it.

HTML CODE FILE :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="navigation.css" rel="stylesheet">
</head>
<body>
   <div class="breadcrumb">
    <a href="#" class="active">Browse</a>
    <a href="#">Compare</a>
    <a href="#">Order Confirmation</a>
    <a href="#">Checkout</a>
   </div>
<br /><br/>

   <div class="breadcrumb flat">
 <a href="#" class="active">Browse</a>
 <a href="#">Compare</a>
 <a href="#">Order Confirmation</a>
 <a href="#">Checkout</a>
   </div>
</body>
</html>

CSS CODE FILE :

*{
 margin: 0;
 padding: 0;
}
body{
 height: 100vh;
 text-align: center;
 padding-top: 300px;
 background: #689976;
 background: linear-gradient(#689976, #ACDACC);
 font-family: 'Merriweather sans' arial, verdana;
}
.breadcrumb{
 display: inline-block;
 box-shadow: 0 0 15px 1px #00000059;
 overflow: hidden;
 border-radius: 5px;
 counter-reset: flag;
}
.breadcrumb a{
 text-decoration: none;
 outline: none;
 display: block;
 float: left;
 font-size: 12px;
 line-height: 36px;
 color:#fff;
 padding: 0 10px 0 60px;
 background: #666;
 background: linear-gradient(#666, #333);
 position: relative;
}
.breadcrumb a:first-child{
 padding-left: 46px;
 border-radius: 5px 0 0 5px;
}
.breadcrumb a:first-child::before{
 left: 14px;
}
.breadcrumb a:last-child{
 border-radius: 0 5px 5px 0;
 padding-right: 20px;
}
.breadcrumb a.active, .breadcrumb a:hover{
 background: #333;
 background: linear-gradient(#333, #000);
}
.breadcrumb a.active::after, .breadcrumb a:hover::after{
 background: #333;
 background: linear-gradient(135deg, #333, #000);
}
.breadcrumb a::after{
 content: "";
 position: absolute;
 top: 0;
 right: -18px;
 width: 36px;
 height: 36px;
 transform: scale(0.707) rotate(45deg);
 z-index: 1;
 background: #666;
 background: linear-gradient(135deg, #666, #333);
 box-shadow: 
 2px -2px 0 2px #00000066,
 3px -3px 0 2px #ffffff1a;
 border-radius: 0 5px 0 50px;
}
.breadcrumb a:last-child::after{
 content: none;
}
.breadcrumb a::before{
 content: counter(flag);
 counter-increment: flag;
 border-radius: 100%;
 width: 20px;
 height: 20px;
 line-height: 20px;
 margin: 8px 0;
 position: absolute;
 top: 0;
 left: 30px;
 background: #444;
 background: linear-gradient(#444, #222);
 font-weight: bold;
}
.flat a, .flat a::after{
 background: #fff;
 color: #000;
 transition: all 0.5s;
}
.flat a::before{
 background: #fff;
 box-shadow: 0 0 0 1px #ccc;
}
.flat a:hover, .flat a.active,
.flat a:hover::after, .flat a.active::after{
 background: #9EEB62;
}

Video Tutorial of breadcrumb navigation bar

Breadcrumb Navigation Bar In Html And CSS Source Codes

HTML CODE FILE :

CSS CODE FILE :

1 Comments

Post a Comment

About Us

Contact Form

how to create breadcrumb navigation bar in html and css

Video Tutorial of breadcrumb navigation bar

Breadcrumb Navigation Bar In Html And CSS Source Codes

HTML CODE FILE :

CSS CODE FILE :

You might like

1 Comments

Post a Comment

Contact Form