Technique G65:Providing a breadcrumb trail

Example 1: Photographer's portfolio

A photographer's portfolio website has been organized into different galleries and each gallery has further been divided into categories. A user who navigates through the website to a particular page containing a photo of a Gentoo penguin would see the following breadcrumb trail at the top of the web page:

Home / Galleries / Antarctica / Penguins / Gentoo Penguin

The markup for this example implements all of the text items except "Gentoo Penguin" as links. To provide semantic structure to the breadcrumb trail, the links are contained within a list element, which is nested within a nav element with an aria-label. The current location, Gentoo Penguin, is included as the last item in the breadcrumb trail but it is not implemented as a link to visually and semantically differentiate it from the previous items in the trail.

The aria-current attribute is specified on the last list item in the trail to programmatically identify it as the item that reprsents the current web page. The markup would be styled using CSS to display the breadcrumb trail horizontally.

<nav aria-label="Breadcrumbs"> 
  <ul>
    <li><a href="/">Home</a> /</li>
    <li><a href="/galleries">Galleries</a> /</li> 
    <li><a href="/galleries/antarctica">Antarctica</a> /</li>
    <li><a href="/galleries/antarctica/penguins">Penguins</a> /</li>
    <li aria-current="page">Gentoo Penguin</li>
  </ul> 
</nav>

Working example: Breadcrumb example

Example 2: E-commerce site

The information architecture of an e-commerce website is categorized from general to increasingly more specific product subsections.

You are here: Acme Company → Electronics → Computers → Laptops

The trail begins with "You are here" and ends with the current page. Items in the trail are clickable or tappable links with the exception of "You are here", which is a static heading. This example uses a right arrow symbol (→) as a separator.

In this example a h2 element, a nav element with an aria-label attribute, and an unordered list are used to provide semantics. The markup would be styled using CSS to display the breadcrumb trail horizontally.

<nav aria-label="Breadcrumbs"> 
  <h2>You are here:</h2> 
  <ul>
    <li><a href="/">Acme Company</a> &#8594;</li> 
    <li><a href="/electronics/">Electronics</a> &#8594;</li>
    <li><a href="/electronics/computers/">Computers</a> &#8594;</li>
    <li><a href="/electronics/computers/laptops/" aria-current="page">Laptops</a></li>
  </ul> 
</nav>

h2, ul, ul li{ display: inline;}
nav > h2{ font-size: 1em; } 
ul { padding-left: 0em; }

Working example: Breadcrumb example