If imitation is truly the highest form of flattery, Apple might be the most complimented tech company on Earth. Web designers frequently copy the company's almost iconic style or at least emulate aspects of its clear and modern motif.
Recently, an Ecommerce Developer reader requested a tutorial about creating Apple-styled breadcrumb navigation, and since we are always eager to please, here is that tutorial.
Video Tutorial
Particulars of Apple's Breadcrumb Navigation
So what makes Apple's implementation of breadcrumb navigation different or worthy of imitation? In my opinion, there are just three things.
First, Apple's breadcrumb navigation includes several graphical elements, like a background image, divider graphics (chevrons in this case), and an icon.
Next, Apple's breadcrumbs co-exist with other site navigation. While this could create some space problems if a site had particularly long labels in its breadcrumb navigation, it does make the design more compact and clean.
Finally, Apple has closely integrated its breadcrumb navigation with its category graphics. Notice, that the iPad banner seems to share a border with the breadcrumb navigation.
Your CMS Determines Your Breadcrumbs
Before I dive into the nitty-gritty of writing the styles for the breadcrumbs, I want to remind you that breadcrumbs are almost certainly a feature of your content management system (CMS) and, therefore, will have significantly different markup from platform to platform. With this in mind, this tutorial focuses on the styles necessary to create a breadcrumb navigation similar to Apple's and not on the PHP, Ruby, Java, or other server-side coding required to actually generate the breadcrumbs.
Hot Air Balloons
For my mockup, I have decided to create the header section for a fictional hot air balloon retailer. You should notice that the breadcrumbs for this mockup include all three of the Apple breadcrumb particulars mentioned above.
HTML
Here is the HTML that I used in my example site.
<!doctype html> <html lang="en"> <head> <title>Apple Style Breadcrumb Navigation</title> <link type="text/css" rel="stylesheet" href="style.css"> <link rel="icon" type="image/png" href="favicon.png"> </head> <body> <div id="wrapper"> <div id="header"> <img src="header.png" alt="" /> </div><!--end header--> <div id="search"> <img src="search.png" alt="" /> </div><!--end search--> <div id="breadcrumb"> <ul> <li><a href="#"><img src="home-icon.png"/></a></li> <li><a href="#">shop hot air balloons</a></li> <li class="last-item"><a href="#">hot air balloons</a></li> </ul> <ul id="global2-nav"> <li><a href="#">help</a></li> <li><a href="#">account</a></li> <li><a href="#">cart</a></li> </ul> <span> <a href="#"><img src="category.png" alt="category message" /></a> </span> </div><!--end breadcrumb--> <div id="content"> </div><!--end content--> </div><!--end wrapper--> <script src="js.js"></script> </body> </html>
In the breadcrumb section of the HTML above, you should notice a couple of things. First, notice that the last list item in the breadcrumb unordered list has an additional class.
<div id="breadcrumb"> <ul> <li><a href="#"><img src="home-icon.png"/></a></li> <li><a href="#">shop hot air balloons</a></li> <li class="last-item"><a href="#">hot air balloons</a></li> </ul>
Class names that identify the last item or first item in a list are fairly common for breadcrumb navigation. Just be aware that if your CMS doesn't provide an indicator of the last list item, you will either need to add that indicator (class name) on the server side or use JavaScript to identify the last item and add the class name.
You should also notice that the supplemental navigation that will co-exist with the breadcrumb navigation is contained in the same div. If your CMS allows you to adjust the template so that both of these navigation lists are contained in the same div, it will be easier to position them later.
Finally, the category image, which is wrapped with a span tag, is also inside the same div as the breadcrumb navigation.
Graphics
The Apple breadcrumb navigation uses several images, so if I am going to emulate Apple, I need to create several images myself. I ended up making four graphics: a background image for the entire breadcrumb section; a home icon; a chevron icon (this is the arrow-like spacer between crumbs), and a category banner. All of these images are included in the source files accompanying this tutorial.
Style
The CSS is where I am going to do my heavy lifting for this project since the effect we're are looking for is completely handled in an external cascading style sheet. Below, you will find all of the style declarations for the breadcrumb section of the page. Take a quick look through the declarations.
#breadcrumb {float: left; margin: -1px 0 0 4px; background: url("bread-back.png") no-repeat; min-height: 170px; width: 805px; }
#breadcrumb ul {position: relative; top: 10px; left: 25px; display: inline; margin: 0; padding:0;
#breadcrumb li {display: inline; list-style: none;}
#breadcrumb li a img {border: none; position: relative; top: 3px;}
#breadcrumb li a {padding: 12px 30px 12px 0; background: url("chevron.png") no-repeat scroll 100% 50%; color: #bec1cb; text-decoration: none; text-transform: uppercase; font-size: .75em; font-weight: bold; }
#breadcrumb li.last-item a {background: none;}
#breadcrumb #global2-nav a {padding: 12px 10px 12px 0; background: none;}
#breadcrumb #global2-nav { float: right; margin-right: 30px;}
#breadcrumb span {position: relative; top: -7px; left: 10px;}
#breadcrumb span img {border: none;}
Key things to notice in this section include the positioning for the unordered lists and the span containing the category banner; the fact that the chevron image is a background at the anchor level, not the list item level; and that I am specifying a background attribute of "none" for the last list item in the breadcrumb navigation and for the entire second unordered list, which has an ID of "global2-nav."
The positioning is significant—as you may perceive—because it allows me to move the various breadcrumb elements around the section. For example, my category banner, which would naturally be positioned lower on the page, is now snug against the breadcrumb navigation, similar to how the iPad category banner was positioned in the original Apple example.
Adding the chevron image at the anchor level makes it easier to control how much of the background graphic appears—notice the significant top and bottom padding.
#breadcrumb li a {padding: 12px 30px 12px 0; background: url("chevron.png") no-repeat scroll 100% 50%; color: #bec1cb; text-decoration: none; text-transform: uppercase; font-size: .75em; font-weight: bold; }
Finally, as you might imagine, I am using a specific class name and ID to prevent the chevron graphic from appearing at the end of the breadcrumbs or with the other navigation in the section.
Summing Up
As I mentioned above, implementing this sort of navigation in your CMS will be somewhat different from what I have just demonstrated above, but the basic concepts should be the same.
