Breadcrumbs

A breadcrumb shows a visitor where the current page sits inside a site's hierarchy, as a trail of links separated by a small divider character. In Bootstrap 3 it's just a .breadcrumb list — no JavaScript involved at all. We'll build the trail a visitor would see while drilling down into a specific hike on TrailMap.

The .breadcrumb List

Wrap the trail in <ol class="breadcrumb"> (an ordered list, since the items represent a sequence), with one <li> per step and a link inside each of the earlier steps.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Trails</a></li>
  <li class="active">Eagle Ridge Loop</li>
</ol>

Marking the Current Page with .active

The last item — the page the visitor is actually on — gets the .active class instead of a link. It renders as plain, muted text rather than a clickable anchor, since linking to the page you're already on is pointless.

<li class="active">Eagle Ridge Loop</li>
Note: Only the final, current-page item should carry .active and skip the <a> tag. Every earlier step should still be a real link so the visitor can jump back up the hierarchy.

Where the Separator Comes From

The /-style divider between items isn't markup at all — it's pure CSS, generated with the content property on a ::before pseudo-element attached to every item after the first:

.breadcrumb > li + li:before {
  content: "/\00a0";
  padding: 0 5px;
  color: #ccc;
}

Because the separator is generated in the stylesheet rather than typed into the HTML, you never need to add or remove a slash by hand when items are added or removed from the trail.

Note: This lives in Bootstrap's source as a LESS variable (@breadcrumb-separator), so a site can swap the / for something else — a » chevron, for instance — by recompiling with a different value. The later LESS Customization lesson covers exactly this.

Worked Example: TrailMap's Breadcrumb Trail

The trail a TrailMap visitor sees on a specific trail's detail page, three levels deep.

<ol class="breadcrumb">
  <li><a href="#">TrailMap Home</a></li>
  <li><a href="#">Colorado Trails</a></li>
  <li><a href="#">Boulder County</a></li>
  <li class="active">Eagle Ridge Loop</li>
</ol>
Next, learn how to split long lists of results across multiple pages with Pagination.