Create BreadCrumb Navigation with CSS3

In this post we will create a simple breadcrumb navigation using CSS3.  Earlier creation a breadcrumb navigation required the use of images but with advances in CSS it is now possible to achieve the same effect without using any images at all.

Here is what we will be creating in this tutorial.

CSS3-BreadCrumbs Final

View Demo

The Concept

We will utilize a property called pseudo elements for this tutorial.  Pseudo elements  are a property of css3.  Basically we will add two pseudo elements  to our navigation block. Refer to the following picture for better understanding.

Block plus psudeo elements is equal to mavigation element

Looks pretty easy? It sure is. Lets start

Step 1 : Create a Simple Navigation Menu

Lets start by simple creating an ordered list of elements.  Here is the HTML for the same

HTML

<head>
<link rel="stylesheet" type="text/css" href="style-nav.css">
</head>

<body>
<div id="my-breadcrumbs">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Product</a></li>
 <li><a href="#">Contact</a></li>
  
 </ul>
</div>
</body>

CSS

#my-breadcrumbs ul li {
 list-style:none; 
}

#my-breadcrumbs {
margin-top: 250px;
margin-left: 300px;
}

#my-breadcrumbs ul li a {
 display: block;
 float: left;
 height: 50px;
 background: #4060A5;
 text-align: center;
 padding: 30px 40px 0 40px;
 position: relative;
 margin: 0 45px 0 0; 
 font-family: "Open Sans", Helvetica, Arial, sans-serif;
 font-size: 20px;
 text-decoration: none;
 color: #fff;
}

This adds styling to our list element. Here is what we have till now

Navigation Blocks

 

Step 2 : Add Pseudo Elements

As discussed before, we will add 2 pseudo elements, one after and one before the block. We have used a combination of border properties to achieve the desired effect.

CSS for After Pseudo Element

#my-breadcrumbs ul li a:after {
content: "";  
    border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #4060A5;
position: absolute; right: -40px; top: 0;   
}

CSS for Before Pseudo Element

#my-breadcrumbs ul li a:before {
 content: "";
  position: absolute;

  margin-top: -30px;   
  border-width: 40px 0 40px 40px;
  border-style: solid;
  border-color: #4060A5 #4060A5 #4060A5 transparent;
  left: -40px;      
} 

This how the navigation block looks now

CSS3 BreadCrumbs

Step 3 Final Touches

We will hide the before pseudo element and add rounded border effects to the firdt navigation block. We will utilize first-child property for the same. We will also add hover effects to our menus .

CSS

/* Hide the Before Pseudo Element */
#my-breadcrumbs ul li:first-child a:before {
    display: none; }

/* Add Border Radius */
#my-breadcrumbs ul li:first-child a{
    border-top-left-radius: 10px; border-bottom-left-radius: 10px;border-bottom-right-radius: 1px;
}

/* Hover Effects */
#my-breadcrumbs ul li a:hover::before {
  border-color: #5172B8 #5172B8 #5172B8 transparent;    
}
/* Hover Effects */
#my-breadcrumbs ul li a:hover::after {
      border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #5172B8;        
}

With this our navigation element is complete . This is how it will look now. I really hope you enjoyed the tutorial. We will be back with more.

CSS3 BreadCrumb Navigation with Hover

CheckOut the Demo

View Demo
About Ankit

Founder of Spice Forms.
Spice Form is a Drag n Drop tool to create powerful web forms in minutes.

Comments

  1. Thanks for sharing this CSS 3 Menu. I would be help for anyone who is starting on CSS3. Hope I had these kinds of examples while I was learning CSS. Thanks for sharing.

  2. I tried it and works well. Cheers

  3. Works as a charm, really nice one. :)

    Can’t figure why I can’t change width and background color at certain ‘s with an extra classname or :nth-child(). It’s like some change all or none, is there any way to work around that?

  4. What changes should I make in the CSS to make it Right to left (RTL).

  5. patrick Meppe says:

    Really great job. It worked perfectly.

Trackbacks

  1. […] Create BreadCrumb Navigation with CSS3 – No Images […]

  2. […] like in the earlier tutorial, we will be utilizing the pseudo elements to achieve the ribbon effect.  We will also utilize Box […]