Breadcrumbs Markup

First published on 2005-11-24, updated on 2008-01-19.

Breadcrumb trails are a simple and reliable way to inform the user of their current location within a website. But what markup should they use?

What are Breadcrumbs?

Breadcrumbs are literrally crumbs of bread. In the fairy tale Hansel and Gretel, the characters left breadcrumbs on the ground as they travelled. They created a breadcrumb trail from their current location to their home.

On a website, the breadcrumbs are links. The current location is not a link because it would take the user to where they are. It would have no link direction.

Traditional Breadcrumb

Typical code for a breadcrumb uses a sequence of links separated by punctuation:

Homepage > Web Technology > Articles > Traditional Breadcrumbs

The HTML for that is simple: 

<p><a href="/">Homepage</a> > <a href="../">Web Technology</a> > <a href=".">Articles</a> > Traditional Breadcrumbs

No CSS or images are required, although they could enhance it.

You can also enhance it with some common rel values: 

<p><a href="/" rel="home">Homepage</a> > <a href="../">Web Technology</a> > <a href="." rel="up">Articles</a> > Traditional Breadcrumbs

This makes the relationships explicit, with text labels for UA navigation aids.

Flat List

An ordered list indicates the order of steps from the homepage: 

<ol id="breadcrumb">
 <li class="first"><a href="/">Homepage</a>
 <li><a href="../">Web Technology</a>
 <li><a href=".">Articles</a>
 <li>Traditional Breadcrumbs
</ol>

With some extra styling: 

/* Breadcrumb */
#breadcrumb, #breadcrumb li {
 margin: 0;
 padding: 0;
 display: inline;
 list-style: none;
}
#breadcrumb li {
 padding-right: 0.75em;
}

It becomes this:

Flat List with Arrows

Content cannot appear between <li> elements, so an image must be used:

Greater-than sign.

The markup must change slightly: 

<ol id="breadcrumb">
 <li class="first"><a href="/">Homepage</a>
 <li><a href="../">Web Technology</a>
 <li><a href=".">Articles</a>
 <li class="last">Traditional Breadcrumbs
</ol>

New styling: 

/* Breadcrumb */
#breadcrumb, #breadcrumb li {
 margin: 0;
 padding: 0;
 display: inline; /* Horizontal list */
 list-style: none;
}
#breadcrumb li {
 padding: 0 0.125em 0 0.25em;
 background: url(gt.gif) no-repeat right center;
}
#breadcrumb a {
 margin-right: 8px; /* Width of the arrow */
 background: none;
}
#breadcrumb .first {
 margin-left: 0;
 padding-left: 0;
}
#breadcrumb .last {
 background: none;
}

Resulting in this:

The padding in em lets the gaps scale with text size. The margin-right in px creates space for the graphic.

Nested Lists

Ordered lists indicate the sequence of the links is important. The lists are nested to represent the heirarchical relationship between the link destinations: 

<ol id="breadcrumb">
 <li><a href="/">Homepage</a>
  <ol>
   <li><a href="../">Web Technology</a>
    <ol>
     <li><a href=".">Articles</a>
      <ol>
       <li>Traditional Breadcrumbs
      </ol>
    </ol>
  </ol>
</ol>

By default, it would look something like this:

  1. Homepage
    1. Web Technology
      1. Articles
        1. Traditional Breadcrumbs

With some extra styling: 

/* Breadcrumb */
#breadcrumb, #breadcrumb ol, #breadcrumb li {
 margin: 0;
 padding: 0;
 display: inline;
 list-style: none;
}
#breadcrumb ol {
 padding-left: 0.75em;
}

It becomes this:

Nested Lists with Arrows

To put an arrow between each item, an image is needed:

Greater-than sign.

The markup is identical but some styling changes are needed: 

/* Breadcrumb */
#breadcrumb, #breadcrumb ol, #breadcrumb li {
 margin: 0;
 padding: 0;
 display: inline;
 list-style: none;
}
#breadcrumb ol {
 margin-left: 0.125em;
 padding-left: 0.25em;
 background: url(gt.gif) no-repeat left center;
}
#breadcrumb li li {
 margin-left: 8px; /* Width of the arrow */
}
#breadcrumb, #breadcrumb a {
 margin-left: 0;
 padding-left: 0;
}

Resulting in this:

The margin and padding in em let the gaps scale with text size. The margin-right in px creates space for the graphic.

Analysis

There are many ways to do the same thing.

Comparison of Markup for Breadcrumbs
Filesize (Bytes) Familiar
HTML CSS Images Total Increase Visually? Structurally?
Traditional 115 0 0 115 0% Yes Yes
Flat List 172 159 0 331 186% No No
Flat List with Arrows 142 475 100 716 523% Yes No
Nested Lists 233 175 0 408 253% No No
Nested Lists with Arrows 221 399 100 720 526% Yes No

Recommendation

Traditional breadcrumbs use much less filesize and are more familiar.