In this article we’ll show you how to create Flat Breadcrumb Navigation UI Design Using HTML and CSS. This type of Flat Breadcrumb Navigation is used on the websites many Purpose. This kind of Flat Breadcrumb Navigation UI Design looks attractive on website.
You easily create this Flat Breadcrumb Navigation UI Design Using HTML and CSS. then this article will definitely help you. For this, you need to have an idea about basic HTML and CSS then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Flat Breadcrumb Navigation
The first item of any breadcrumb always will home, then it shows the categories. There are 4 items, the first item which is for home contains only a numbers, and left other contains icons with text. The design is a complete arrow type and flat interface. Also, there is a hover effect when you will hover on any item the background color will change.
Watch the video tutorial to create Flat Breadcrumb Navigation
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these Flat Breadcrumb Navigation With numbers step by step completely beautifully. So you can learn how to make these Pure CSS Breadcrumb. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Flat Breadcrumb Navigation Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Pure CSS Animated Tabs With Slide Indicator
- How To Make Dropdown Menu Using HTML and CSS
- E-Commerce Product Card Design Using JS
Flat Breadcrumb Navigation | Source Codes
You have to create an HTML and CSS File For this Breadcrumb Navigation. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.
HTML CODE:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Breavrumb</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
</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 />
<!-- another version - flat style with animated hover effect -->
<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>
Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans);
* {margin: 0; padding: 0;}
html, body {min-height: 100%;}
body {
text-align: center;
padding-top: 100px;
background: #689976;
background: linear-gradient(#689976, #ACDACC);
font-family: 'Merriweather Sans', arial, verdana;
}
.breadcrumb {
display: inline-block;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
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: white;
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 rgba(0, 0, 0, 0.4),
3px -3px 0 2px rgba(255, 255, 255, 0.1);
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: white;
color: black;
transition: all 0.5s;
}
.flat a:before {
background: white;
box-shadow: 0 0 0 1px #ccc;
}
.flat a:hover, .flat a.active,
.flat a:hover:after, .flat a.active:after{
background: #9EEB62;
}
now you’ve successfully created these Flat Breadcrumb Navigation. If your code does not work or facing any error/problem to comment down or contact us through the contact page.
