Technique G65:Providing a breadcrumb trail

Example 1

A developer searches within the Web site of an authoring tool manufacturer to find out how to create hyperlinks. The search results bring him to a Web page with specific instructions for creating hyperlinks using the authoring tool. It contains the following links to create a breadcrumb trail:

              Home :: Developer Center :: How To Center
            

In this example the breadcrumb trail does not contain the title of the current Web page, "How to create hyperlinks". That information is available as the title of the Web page.

Example 2

A photographer's portfolio Web site has been organized into different galleries and each gallery has further been divided into categories. A user who navigates through the site to a Web 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
            

All of the items except "Gentoo Penguin" are implemented as links. The current location, Gentoo Penguin, is included in the breadcrumb trail but it is not implemented as a link.

Example 3

The information architecture of an ecommerce Web site 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" and "Laptops." 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.

HTML for this example

 
          <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>Laptops</li>
            </ul> 
          </nav>
      

CSS for this example

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

Working example: Breadcrumb example