Fancy Breadcrumb Navigation Tutorial & Example

Breadcrumb Navigation Tutorial

Today I'm going to show you how to build a fancy breadcrumb navigation menu. Breadcrumb navs are a very import aspect of a well designed website. They provide the user with a clear understanding of their current location, and also give the user easy access to navigate back home, or up a level on your navigation structure.

We will be creating our breadcrumb menu using only HTML and CSS. We will be using CSS Flexible Boxes (flexbox) to make the navigation more usable, and incorporating Font Awesome so that we can have icon support for our breadcrumb navigation.

A working demo of the Breadcrumb Navigation we will be building:


Icons

If you don't know about Font Awesome icons yet, you should check them out. They are free to use and only required you to add a stylesheet to the top of your page. Check out the Font Awesome Getting Started page for more detailed instructions.

Once you have the required CSS styles in the header of your page, you can add all sorts of icons using very simple classes like this:

<i class="fa fa-home"></i>  

Which would give you a very nice home icon. Check out the full list of available icons and start using them in your next HTML & CSS project today.

This is the HTML code we will be using to structure our navigation:

<div id="cssmenu">  
    <ul>
        <li class="active"><a href="#">Breadcrumbs</a></li>
        <li><a href="#">Daily UI</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
    </ul>
</div>  

As you can see, this is the usual structure for a simple breadcrumb menu. We are using a div container to match the Menu Maker structure, but you can use a nav if you find it more semantic.

So far, we have something like this:

HTML Structure for Breadcrumbs Menu

Reversing the Breadcrumb Navigation

As you may note, we are set the menu items in a reversed order. That is because we need them to have a "reversed" z-index, that is, the first elements appear above the last to achieve the desired effect. Then with CSS we will reverse them again to display them in the normal order, but getting the z-index reversed :)

Here is all the code we need to make it happens:

/* Menu */
#cssmenu ul {
    display: flex; /* A key part of our menu, displays items side by side, and allows reversing them */
    flex-direction: row-reverse; /* Reverse the items */
}

You can learn more with this Complete Guide to Flexbox published in CSS-Tricks. Specifically, you can learn more about the flex-direction property.

Basic CSS Styles

Let's start building our menu with some basic CSS styles. Here we are going to define the background, center the breadcrumb menu horizontally and vertically, scale up icons and reset some unneeded list default styles setup by browsers.

The code is very simple, and have been fully commented for better understanding:

/* Background container */
#cssmenu-container {
    height: 220px;
    background-color: #CEE3F8;
}

/* Menu container */
#cssmenu {
    display: inline-block; /* The menu will have width as needed, not 100% */
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1em;
    border-radius: 2px; /* Little curvature in the borders */
    overflow: hidden; /* Hide everything that overflows, like shadows */
}

/* Icons */
#cssmenu i {
    transform: scale(1.4);
}

/* Menu */
#cssmenu ul {
    display: flex; /* A key part of our menu, displays items side by side, and allows reversing them */
    flex-direction: row-reverse; /* Reverse the items */
    /* Reset styles, overwrite browser defaults */
    list-style: none;
    margin: 0;
    padding: 0;
}

#cssmenu ul li {
    margin: 0;
}

So far, we have something like this:

Basic CSS Styles for Breadcrumbs Menu

Styling the Breadcrumb Menu Items

Then, let's add some styles to make our breadcrumb menu looks great like the design:

/* Menu items */
#cssmenu ul li a {
    display: inline-block;
    font-family: sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    padding: 12px 30px 12px 45px; /* Adjusting padding to get the proper space */
    margin-left: -20px; /* Pull the items to the left, so the rounded right side will get over them */
    color: white;
    background-color: #428EFE;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 0 100px 100px 0; /* Get the right side rounded */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); /* Apply the shadow */
}

And now we are getting closer to the desired result:

Styles for Breadcrumbs Navigation Items

Fixing Details

We still need to fix some details, like customizing the active item for our navigation breadcrumbs, remove unnecessary shadows, and add styles for events (like hover) as needed.

/* Hover event */
#cssmenu ul li:hover a {
    background-color: #297EFE;
}

/* Remove the shadow for first item, last in the right side when it gets reversed */
#cssmenu ul li:first-child a {
    box-shadow: none;
}

/* Active item is a bit different */
#cssmenu ul li.active a {
    color: #428EFE;
    background-color: #EEF5FF;
}

/* Remove the shadow for the active's next item, to match the design more accurately */
#cssmenu ul li.active + li a {
    box-shadow: none;
}

Here is what we got as a final result:

Final Breadcrumbs Menu

Conclusions

And that's all! We should have a fancy breadcrumb navigation working on all modern browsers :)

It is worth noting that we have used the technique of reverting menu items because we believe it is the best way to achieve the desired effect. Other techniques could be used too, such as defining z-index manually using the nth() selector, or using pseudo-elements, but definitely not the same results would be obtained. It would be even more difficult to implement this breadcrumb menu so that we can put the active class to any menu item, which has been easily achieved with our implementation.

We really hope you liked this tutorial and find it useful!