In the famous old story of Hansel and Gretel, the children spread breadcrumbs behind them as they made their way into the woods. They left this trail of breadcrumbs so that they would always be able to find their way home. In web development, breadcrumbs are a navigational element that, much like Hansel and Gretel’s breadcrumbs, show you the path you took to get to the page you’re currently visiting, and allow you to retrace your steps, if you like. This helpful navigational element was actually named for the breadcrumbs in the old fairy tale.
While breadcrumbs are certainly a useful feature to add to any project, they’re often overlooked when it comes to adding style. Most of the time, they’re treated just like any other link in terms of style. If you want to add some flair to your breadcrumbs, check out the snippet below.
The HTML
Here’s the easy part. For the purposes of this example, we’ll just use static HTML to create our breadcrumbs, which will be <li> elements within a <ul> tag.
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
<ul id="breadcrumb"> <li><a href="#"><i class="fa fa-home"></i></a></li> <li><a href="#">Crumb 1</a></li> <li><a href="#">Crumb 2</a></li> <li><a href="#">Crumb 3</a></li> <li><a href="#">Crumb 4</a></li> </ul>
Here’s how it looks so far:
As you might be able to tell, we used a Font Awesome icon to indicate the home page. If you plan on using Font Awesome too, make sure you link to their library somewhere in the <head> section of your code. Here’s the link to their library:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
The CSS
In the CSS, we’re going to give the breadcrumbs a nice arrow shape. This effect is achieved by utilizing the :before and :after pseudo-selectors (if you take a look at the code, you’ll see that all of the shaping of the breadcrumbs happens within the #breadcrumb li a:before and #breadcrumb li a:after selectors. If you’re interested in learning how to achieve that shaping, pay special attention to the uses of border and border-color within those selectors).
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);
body{
font-family: 'Source Sans Pro';
background-color: #d6fffb;
}
#breadcrumb{
list-style-type: none;
display: inline-block;
}
#breadcrumb li{
float: left;
}
#breadcrumb li a{
color: #fff;
display: block;
background: #f40c81;
text-decoration: none;
position: relative;
height: 40px;
line-height: 40px;
padding: 0 10px 0 5px;
text-align: center;
margin-right: 23px;
}
#breadcrumb li:nth-child(even) a:before{
border-left-color: transparent;
}
#breadcrumb li:first-child a{
padding-left: 15px;
border-radius: 4px 0 0 4px;
}
#breadcrumb li:first-child a:before{
border: none;
}
#breadcrumb li:last-child a{
padding-right: 15px;
border-radius: 0 4px 4px 0;
}
#breadcrumb li:last-child a:after{
border: none;
}
#breadcrumb li a:before, #breadcrumb li a:after{
content: "";
position: absolute;
top: 0;
border: 0 solid #f40c81;
border-width: 20px 10px;
width: 0;
height: 0;
}
#breadcrumb li a:before{
left: -20px;
border-left-color: transparent;
}
#breadcrumb li a:after{
left: 100%;
border-color: transparent;
border-left-color: #f40c81;
}
#breadcrumb li a:hover{
background: #7dd49a;
}
#breadcrumb li a:hover:before{
border-color: #7dd49a;
border-left-color: transparent;
}
#breadcrumb li a:hover:after{
border-left-color: #7dd49a;
}It’s a lot of CSS, but don’t worry, most of it is rather simple. Here’s what it looks like now:
Finishing Touches
Let’s add some polish to this design by adding a cool hover effect that changes the background color from pink to green when the breadcrumbs are hovered upon. Because the #breadcrumb li a:before and #breadcrumb li a:after make up part of the background of the breadcrumbs, it’s important to remember to include hover effect style rules for them too, or else your breadcrumbs could end up looking a little funky when a user hovers upon them.
#breadcrumb li a:hover{
background: #7dd49a;
}
#breadcrumb li a:hover:before{
border-color: #7dd49a;
border-left-color: transparent;
}
#breadcrumb li a:hover:after{
border-left-color: #7dd49a;
}This is what your finished product should look like (notice that the hover effect is applied to Crumb 4).
awesome thanks for sharing