# Providing a breadcrumb trail

ID: G65

Technology: general

Type: Technique

## When to Use

All technologies.

## Description

A breadcrumb trail (or 'breadcrumb navigation') helps the user to visualize how content has been structured and how to navigate back to previous web pages. Many even identify the current location in the series of web pages, commmonly as the last element in the trail and with a variation in its visual style. A breadcrumb trail either displays locations in the path the user took to reach the web page, or it displays the location of the current web page within the organization of the site.

Breadcrumb trails are implemented using links to the Web pages that have been accessed in the process of navigating to the current web page. They are placed in the same location within each web page in the set.

It can be helpful to users to separate the items in the breadcrumb trailing with a visible separator. Examples of separators include ">", "|", "/", and "→". Alternatively, one could use decorative iconography or create separators with CSS.

## Examples

### 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

### 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.

#### HTML

    <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>

#### CSS

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

Working example: Breadcrumb example

## Tests

### Procedure

When breadcrumb trails have been implemented in a set of web pages:

1. Navigate to a web page.
2. Check that a breadcrumb trail is displayed.
3. Check that the breadcrumb trail displays the correct navigational sequence to reach the current location or the correct hierarchical path to the current location within the site structure.

4. For a breadcrumb trail that does not include the current location:

   1. Check that all elements in the breadcrumb trail are implemented as links.

5. For a breadcrumb trail that does include the current location:

   1. Check that all elements except for the current location are implemented as links.
   2. Check that the current location is not implemented as a link.

6. For a breadcrumb trail that does include the current location and it behaves as a link:

   1. Check that all elements are implemented as links.
   2. Check that the current location is programmatically identified as such (e.g., using the `aria-current` attribute).
7. Check that all links navigate to the correct web page as specified by the breadcrumb trail.

### Expected Results

- For all web pages in the set using breadcrumb trails,

  - Checks #2, #3, and #7 are true.
  - Either check #4, #5 or #6 is true.

## Related Techniques

- G63
- G128

## Resources

- ARIA Authoring Practices Guide - breadcrumb example
- HTML - breadcrumb navigation