{"id":10723,"date":"2011-11-14T21:01:17","date_gmt":"2011-11-14T13:01:17","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=10723"},"modified":"2025-04-04T00:43:53","modified_gmt":"2025-04-03T16:43:53","slug":"breadcrumb-menu-css3","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/breadcrumb-menu-css3\/","title":{"rendered":"Coding a Graceful Breadcrumb Navigation Menu in CSS3"},"content":{"rendered":"

Navigation menus and links are possibly the most important interface elements in a web layout. These are the only outlets for users to travel between pages<\/strong> and interact with all the content you\u2019ve created. Breadcrumb<\/a> offers similar functionality with the added benefit of tracking your current position<\/strong>. You\u2019ll be able to display all the previous link paths<\/strong> as the user traverses your site hierarchy.<\/p>\n

In this tutorial, we\u2019ll be creating a brilliant breadcrumb navigation menu with some CSS3 effects. This has been tested to work in all major CSS3-compliant browsers; even older browsers that don\u2019t support CSS3 will still render it properly in most cases.<\/p>\n

Before we dive into code, we\u2019ll talk a bit about the functionality of our breadcrumb. Full tutorial at a jump!<\/p>\n

Offering the Trail<\/h2>\n

A breadcrumb trail is no more complex than any other menu. Our styles will utilize many more complex CSS properties than most examples, yet our bare-bones template is still in place to guide users from one page to another.<\/p>\n

\"gmail<\/figure>\n

In this example, we will be recreating a similar style as the Google support menu. You can view their menu<\/a> on the Gmail support page to get an idea of where we\u2019re heading. Ultimately, we want to provide our best user experience for all users<\/strong>, regardless of their Operating System or browser software; thus, I\u2019ve built 2 different code examples to support graceful degradation among older browsers<\/strong>.<\/p>\n

The first is built using custom background images<\/strong> and proper CSS alignments<\/strong>. All of the hover events and active events are pre-built with just a few CSS styles, but users who have images turned off will not be able to experience these effects! This is why I\u2019ve also constructed a similar-looking menu with CSS gradients, rounded corners, and box shadows.<\/p>\n

If you\u2019re nervous about supporting both styles, you can choose between them for your own site. Most visitors will be using images by default, but dig through your website analytics tool<\/a> if you want more precise visitor data.<\/p>\n

Enough words, let\u2019s jump into the project<\/strong>! We\u2019ll start by constructing the basic HTML framework and move into different styling effects. First of all, you need to download the image<\/a><\/strong> required for the project.<\/p>\n

Bare-Bones HTML<\/h2>\n

I\u2019m starting my document with the standard HTML5 page template<\/a><\/strong>. This includes the default doctype, linked CSS, and all the basic elements. I\u2019ve added the code below if you want to start your own document this way. Note that it shouldn\u2019t affect how your breadcrumb is displayed, so feel free to use your own page template if you wish.<\/p>\n

\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>\r\n    <title>Default Page<\/title>\r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\" \/>\r\n<\/head>\r\n\r\n<body>\r\n    \r\n<\/body>\r\n<\/html>\r\n\r\n<p>I'll split the code into two different blocks. The First block with images is built with a slightly different manner, followed by our menu without images. Each set is given its own <strong>ID<\/strong> so we can identify the content much easier. If you're also a fan of jQuery you can use the <strong>#ID selector<\/strong> to manipulate all the internal DOM elements.<\/p>\r\n\r\n<!-- with images -->\r\n<div id=\"breadcrumb\">\r\n    <ul class=\"crumbs\">\r\n        <li class=\"first\"><a href=\"#\" style=\"z-index:9;\"><span><\/span>Blog Home<\/a><\/li>\r\n        <li><a href=\"#\" style=\"z-index:8;\">Archives<\/a><\/li>\r\n        <li><a href=\"#\" style=\"z-index:7;\">2011 Writing<\/a><\/li>\r\n        <li><a href=\"#\" style=\"z-index:6;\">Tips for jQuery Development in HTML5<\/a><\/li>\r\n    <\/ul>\r\n<\/div>\r\n\r\n <\/pre>\n
First, we have a containing div<\/strong> with the id \u201cbreadcrumb<\/em><\/strong>\u201c. In the demo file, I\u2019ve used this to separate our code and move it across the page with some added margins. You could remove this outer div, but you\u2019ll have to re-style everything to fit the new template. It really doesn\u2019t hurt to leave a container since you\u2019ll be able to control the positioning much easier.<\/p>\n
Internally, I\u2019ve built the breadcrumbs using an unordered list. There are so many unique ways to customize styled HTML lists, and breadcrumbs are just one of them. You may notice I\u2019ve given the initial list item a class<\/strong> of \u201cfirst<\/em><\/strong>\u201c. This is needed for some extra padding to keep the menu items in line. Additionally, a small span block<\/strong> is added so we have a proper left border that doesn\u2019t overlap the background image.<\/p>\n
Additionally, each anchor link is planted with a decreasing number for the z-index<\/strong> property. Using images, we\u2019ll need to have each of our links overlap<\/strong> to display the breadcrumb arrow properly. The easiest way to accomplish this is adjusting z-index<\/strong> so each link overlays the next. I started with 9<\/em><\/strong> and worked down from there, but if you have more links in your menu, just begin with a higher integer.<\/p>\n
Menu Without Images<\/h2>\n
To gracefully degrade our breadcrumb<\/strong>, we need a secondary set of HTML list items. If you\u2019re trying to fall back on a single navigation, you could use jQuery to detect the browser agent and apply an ID accordingly. Unfortunately, this isn\u2019t always reliable (for certain mobile users, for example). Another solution is to include an IE-specific stylesheet<\/strong> and hide or show whichever menu works best<\/strong> \u2013 but of course, this option is for Internet Explorer only.<\/p>\n
\r\n<!-- graceful degrade -->\r\n<div id=\"breadcrumb2\">\r\n    <ul class=\"crumbs2\">\r\n        <li class=\"first\"><a href=\"#\">Blog Home<\/a><\/li>\r\n        <li><a href=\"#\">Archives<\/a><\/li>\r\n        <li><a href=\"#\">2011 Writing<\/a><\/li>\r\n        <li class=\"last\"><a href=\"#\">Tips for jQuery Development in HTML5<\/a><\/li> \r\n    <\/ul>\r\n<\/div>\r\n\r\n <\/pre>\n
breadcrumb2<\/code> is our new ID used to target the menu without images. Keeping with this pattern, I\u2019ve used crumbs2<\/code> as the class for the unordered list. Note that the reason we\u2019re using classes<\/strong> is for its simplicity to duplicate these menus<\/strong>, so when you want a few different breadcrumbs on your page, with these classes this won\u2019t ever become a problem.<\/p>\n
We have kept the .first<\/code> class but additionally appended .last<\/code> class onto the final list item. Without images, we cannot duplicate the arrows for each item of the navigation menu, thus I\u2019ve used some rounded corners<\/strong> to spice up the secondary menu. .first<\/code> class and .last<\/code> manipulate the border radius at the very edges of our menu to create a really cool web 2.0-looking style.<\/p>\n
CSS Sliding Background Images<\/h2>\n
For some of the simpler effects, I\u2019ve coupled both breadcrumbs together when building properties. This is useful as it not only saves some space, but when going back to edit styles it\u2019s easier to customize<\/strong> your own look.<\/p>\n
For both #breadcrumb<\/code> and #breadcrumb2<\/code>, I\u2019ve set list-style: none;<\/code> so all internal items will not have markers. You could leave these if you like the effect, but I found HTML becomes tiresome to work around and it\u2019s a lot easier to create new icons. So let\u2019s start with our .crumbs<\/code> class.<\/p>\n
\r\n.crumbs {\r\n    display: block;\r\n}\r\n\r\n.crumbs li {\r\n    display: inline;\r\n}\r\n\r\n.crumbs li.first {\r\n    padding-left: 8px;\r\n}\r\n\r\n.crumbs li a,\r\n.crumbs li a:link,\r\n.crumbs li a:visited {\r\n    color: #666;\r\n    display: block;\r\n    float: left;\r\n    font-size: 12px;\r\n    margin-left: -13px;\r\n    padding: 7px 17px 11px 25px;\r\n    position: relative;\r\n    text-decoration: none;\r\n}\r\n\r\n.crumbs li a {\r\n    background-image: url('..\/img\/bg-crumbs.png');\r\n    background-repeat: no-repeat;\r\n    background-position: 100% 0;\r\n    position: relative;\r\n}\r\n\r\n.crumbs li a:hover {\r\n    color: #333;\r\n    background-position: 100% -48px;\r\n    cursor: pointer;\r\n}\r\n\r\n.crumbs li a:active {\r\n    color: #333;\r\n    background-position: 100% -96px;\r\n}\r\n\r\n.crumbs li.first a span {\r\n    height: 29px;\r\n    width: 3px;\r\n    border-left: 1px solid #d9d9d9;\r\n    position: absolute;\r\n    top: 0px;\r\n    left: 0px;\r\n}\r\n\r\n <\/pre>\n
We set our unordered list to block<\/em><\/strong> so nothing else creeps up around the area. Notice the list items are displayed inline<\/strong> while each anchor link is given much more room to spread out. We want all of the space in our menu to be clickable so this requires building our anchors as block elements<\/strong>.<\/p>\n
I\u2019ve used an image called bg-crumbs.png<\/em><\/strong> for the background. This is known as a simple sprite sheet in CSS, or alternatively a sliding doors<\/strong> technique. This means when the user hovers or clicks on a link we shift the background position to display the updated style. This single image contains all 3 of the designs we need to create the breadcrumb backgrounds at different positions, so we can use the background-position<\/code> property to relocate based on user interaction.<\/p>\n
Custom Effects with CSS3<\/h2>\n
The original breadcrumb design is much simpler to create. This is noticeable since a lot of the CSS properties are more basic than you would imagine, but now we begin to focus on duplicating these effects with only CSS3!<\/p>\n
The individual styles take up a lot of space so I\u2019ll break them down into 2 code blocks.<\/p>\n
\r\n.crumbs2 {\r\n    display: block;\r\n    margin-left: 27px;\r\n    padding: 0;\r\n    padding-top: 10px;\r\n}\r\n\r\n.crumbs2 li {\r\n    display: inline;\r\n}\r\n\r\n.crumbs2 li a,\r\n.crumbs2 li a:link,\r\n.crumbs2 li a:visited {\r\n    color: #666;\r\n    display: block;\r\n    float: left;\r\n    font-size: 12px;\r\n    padding: 7px 16px 7px 19px;\r\n    position: relative;\r\n    text-decoration: none;\r\n    border: 1px solid #d9d9d9;\r\n    border-right-width: 0px;\r\n}\r\n\r\n.crumbs2 li a {\r\n    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.45, rgb(241, 241, 241)), color-stop(0.73, rgb(245, 245, 245)));\r\n    background-image: -moz-linear-gradient(center bottom, rgb(241, 241, 241) 45%, rgb(245, 245, 245) 73%);\r\n    \r\n    \/* For Internet Explorer 5.5 - 7 *\/\r\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5);\r\n    \r\n    \/* For Internet Explorer 8 *\/\r\n    -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5)\";\r\n}\r\n\r\n.crumbs2 li.first a {\r\n    border-top-left-radius: 5px;\r\n    -moz-border-radius-topleft: 5px;\r\n    -webkit-border-top-left-radius: 5px;\r\n}\r\n\r\n.crumbs2 li.last a {\r\n    border-right-width: 1px;\r\n    border-bottom-right-radius: 5px;\r\n    -moz-border-radius-bottomright: 5px;\r\n    -webkit-border-bottom-right-radius: 5px;\r\n}\r\n\r\n <\/pre>\n
The .crumbs2<\/code> menu is using CSS gradients<\/strong> to duplicate the background effects. If you are unfamiliar with these, I highly recommend CSS Tricks\u2019 guide on CSS3 Gradients<\/a>, which should get you up to using CSS3 gradients efficiently. They have included a few more properties for Microsoft and Opera browsers, but these are not fully supported in all cases. I haven\u2019t included them in the demo code here \u2013 but it\u2019s good to understand all of the options.<\/p>\n
-webkit-gradient<\/code> and -moz-linear-gradient<\/code> are the core solutions which do most of the work. I\u2019ve included legacy code for older versions of Internet Explorer, but it\u2019s not guaranteed<\/strong> to display properly all the time (we are using powerful image rendering techniques, after all). Notice that I\u2019ve set both RGB and hex color codes between the background properties. You could stick to one method or the other if you\u2019re more comfortable.<\/p>\n
The border radius<\/strong> code is only applied to our secondary breadcrumb navigation. This gives a neat effect on the top left and bottom right of our entire breadcrumb menu. The bar appears to almost pop off the page \u2013 truly a fantastic effect on browsers which support the styles, but these only cover default states for our links. Now, let\u2019s build hover effects similar to the images we\u2019ve used above.<\/p>\n
CSS3 Borders and Shadows<\/h2>\n
Whenever a user hovers over a link, we want to update a few things. First, we need to darken the border colors on top and bottom of our active element<\/strong>. This can be seen in the images as well for both hover and active states.<\/p>\n
\r\n.crumbs2 li a:hover {\r\n    border-top-color: #c4c4c4;\r\n    border-bottom-color: #c4c4c4;\r\n    \r\n    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.45, rgb(241, 241, 241)), color-stop(0.73, rgb(248, 248, 248)));\r\n    background-image: -moz-linear-gradient(center bottom, rgb(241, 241, 241) 45%, rgb(248, 248, 248) 73%);\r\n    \r\n    \/* For Internet Explorer 5.5 - 7 *\/\r\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1);\r\n    \r\n    \/* For Internet Explorer 8 *\/\r\n    -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1)\";\r\n    \r\n    color: #333;\r\n    \r\n    -moz-box-shadow: 0px 2px 2px #e8e8e8;\r\n    -webkit-box-shadow: 0px 2px 2px #e8e8e8;\r\n    box-shadow: 0px 2px 2px #e8e8e8;\r\n}\r\n\r\n.crumbs2 li a:active {\r\n    border-top-color: #c4c4c4;\r\n    border-bottom-color: #c4c4c4;\r\n    \r\n    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.45, rgb(224, 224, 224)), color-stop(0.73, rgb(235, 235, 235)));\r\n    background-image: -moz-linear-gradient(center bottom, rgb(224, 224, 224) 45%, rgb(235, 235, 235) 73%);\r\n    \r\n    \/* For Internet Explorer 5.5 - 7 *\/\r\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ebebeb, endColorstr=#e0e0e0);\r\n    \r\n    \/* For Internet Explorer 8 *\/\r\n    -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ebebeb, endColorstr=#e0e0e0)\";\r\n    \r\n    box-shadow: -1px 1px 1px 0px #dadada inset;\r\n    -webkit-box-shadow: -1px 1px 1px 0px #dadada inset;\r\n    -moz-box-shadow: -1px 1px 1px 0px #dadada inset;\r\n    \r\n    color: #333;\r\n}\r\n\r\n <\/pre>\n
I\u2019m using the exact same gradient code as we\u2019ve used above, but this time the colors are much different if you noticed our RGB values. Each of the states will darken text color to #333<\/code>, yet other descriptors have been changed slightly to correspond with user commands.<\/p>\n
On hover, you\u2019ll see a shiny embossed effect<\/strong> which, coupled with darkened borders<\/strong>, gives the page popup styles. If you click and hold, you\u2019ll get into the active state which features a darkened background gradient<\/strong>. This effect causes the buttons to look like they are actually \u201cpressed\u201d into the page.<\/p>\n
We\u2019re also applying box-shadow<\/strong> properties from the new CSS3 specs. -webkit<\/code>, -moz<\/code>, and default styles are used with the same settings. Hovering displays a light shadow<\/strong> coming out from the bottom of the selected link. When active, the shadow will be formed on the top, right, and bottom borders. This effect is created with the inset<\/em><\/strong> keyword added to the end of each box-shadow property line. Again, CSS Tricks is your best friend here with an awesome article on box-shadow<\/a>, as it talks about the syntax and its proper usage in CSS3.<\/p>\n
Bonus: More Styles<\/h2>\n
In addition to the tutorial code, I\u2019ve included extra background images with adapted color schemes. I\u2019ve sampled from the original backgrounds and used Adobe Photoshop to create a few variations which you may apply to your own website.<\/p>\n
These bonus files are included in the source file<\/strong>, which you can download in .zip archive format in the section below.<\/p>\n
\"css3<\/figure>\n
You can check out the image above to get an idea of what I\u2019m talking about. If you need a specific color scheme, pop open Photoshop > Image > Adjustments > Hue\/Saturation<\/strong> to modify the color scheme to match your own template. Remember to check the Colorize option<\/strong> in the Hue\/Saturation pane if the color didn\u2019t change at all.<\/p>\n
Conclusion<\/h2>\n
This tutorial should have gotten you familiar with some of the newer CSS3 techniques. We\u2019ve created two fantastic breadcrumb menus styled in a similar manner and built it in a way that it can degrade gracefully in older browsers. Additionally, I\u2019ve offered my demo code and some bonus images for you to play around with.<\/p>\n
Do you particularly like the styles we\u2019ve constructed here? Or maybe you have questions or ideas on how to improve the tutorial code? Please share your thoughts with us in the discussion area below, and don\u2019t forget to download the source files so you can play with the demo!<\/p>\n
More CSS3 Tutorials<\/h2>\n
Craving for more CSS3? Below are our articles for you to understand CSS3 theoretically and practically!<\/p>\n