Michael Gaigg: Über UI/UX Design

Design Guidelines: Breadcrumbs

Posted by Michael Gaigg

Hansel and Gretel using breadcrumbs to find their way home.

Nobody wants to get eaten by a wicked witch and neither do Hansel and Gretel in the tale Hänsel und Gretel by the Brothers Grimm. That's why the kids, as they are taken into the forest, leave little breadcrumbs behind so they can find their way home. I love the story (especially when the witch climbs into the oven to be baked) and the fact that Hansel and Gretel find their way home and see that the evil stepmother has died and everybody can live happily ever after.

Even though the metaphor of Hansel and Gretel is probably the origin of the term Breadcrumbs it is flawed because breadcrumbs do not represent the actual path the user has taken to any given page, but instead the optimal path from the homepage to the current page in the hierarchy.

Fairytale aside, here is how Breadcrumbs should be designed and implemented:

Design Guidelines for Breadcrumbs

1. Display breadcrumbs horizontally
2. Progress from the highest level to the lowest, one step at a time
3. Start with the homepage and end with the current page
4. Apply a simple text link for each level (except the current page)
5. Separator between levels is simple and one-character (usually “>”)
6. Levels show the site hierarchy – not the user’s history

Code Sample / Template

End result:

<div class="breadcrumbs">
<a href="#">Home</a>
<span>></spanv
<a href="#">Topic</a>
<span>></span>
<a href="#">Sub Topic</a>
<span>></span>
<strong>Node</strong>
</div>



div.breadcrumbs {
background: url(bg-breadcrumb.png);
overflow: hidden;
margin: 0;
padding: 0;
height: 2.8em;
line-height: 2.8em;
color: #666;
}
div.breadcrumbs a, div.breadcrumbs strong, div.breadcrumbs span {
float: left;
overflow: hidden;
height: 2.8em;
padding: 0 1em;
font-style: normal;
}
div.breadcrumbs span {
background: url(bg-breadcrumb-arrow.png) no-repeat left center;
overflow: hidden;
padding: 0 0 0 1em;
width: 0px;
filter: alpha(opacity=40);
opacity: 0.4;
}

download bg-breadcrumb.png | download bg-breadcrumb-arrow.png

References

• Nielsen, J.; Breadcrumb Navigation Increasingly Useful; http://www.useit.com/alertbox/breadcrumbs.html
• Spool, J. M.; Design Cop-out #2: Breadcrumbs; http://www.uie.com/articles/breadcrumbs
• Rogers, B.L., Chaparro, B.; Breadcrumb Navigation: Further Investigation of Usage; http://psychology.wichita.edu/surl/usabilitynews/52/breadcrumb.htm
• Yahoo! Design Pattern Library; Breadcrumbs; http://developer.yahoo.com/ypatterns/pattern.php?pattern=breadcrumbs