Breadcrumbs

Also known as: Breadcrumb Trail, Breadcrumb Navigation, Train Marker, Homeward Path, Location Breadcrumbs, Attribute Breadcrumbs

Tags: navigation

Breadcrumbs show where the page is located in the website hierarchy (Location breadcrumbs), or the attributes the user has chosen while refining the search (Attribute breadcrumbs). Breadcrumbs are usually shown at the top of the page, above the page content. They are presented as series of links in a single line of text, where the link labels match with the corresponding page title or the selected attributes. These labels should be separated with delimiters such as greater-than signs ( > ).

Apple Store Location Breadcrumbs.

Apple Store Location Breadcrumbs.

What problem does the pattern solve?

Location Breadcrumbs

  • The page displayed is within a hierarchy of pages and is not the topmost page.
  • The user cannot easily navigate through the hierarchy via other local navigation methods. For example, if the page is fairly deep in a hierarchy, the breadcrumb maybe the simplest way to provide navigation.
  • The page may be arrived at from an external source (e.g., a search results page) and the user will need a sense of context.
  • Do not use breadcrumbs to show user’s history. Users can use browser’s back button for moving back.

Attribute Breadcrumbs

When to use it?

Location Breadcrumbs

  • The page displayed is within a hierarchy of pages and is not the topmost page.
  • The user cannot easily navigate through the hierarchy via other local navigation methods. For example, if the page is fairly deep in a hierarchy, the breadcrumb maybe the simplest way to provide navigation.
  • The page may be arrived at from an external source (e.g., a search results page) and the user will need a sense of context.
  • Do not use breadcrumbs to show user’s history. Users can use browser’s back button for moving back.

Attribute Breadcrumbs

How to use it?

  • Location Breadcrumbs: Display a horizontal list of labels starting with the topmost page and continuing down the site’s hierarchy to the current page.
  • Attribute Breadcrumbs: Display a horizontal list of labels starting with the attribute the user chose first.

Labels

  • Where possible, labels should match the title of their corresponding page or the attribute chosen.
  • Use the rules of title capitalization for labels in the breadcrumb.
  • Separate each label with a one-character separator (usually a greater-than sign >)
  • Include the title of the current page as the last label in the breadcrumb (Location Breadcrumbs).
  • Rather not use the label “Home” for the topmost page. Instead use the specific name for the topmost page (e.g. “Travel”; or & “Weather”; rather than & “Home”.)

Hyperlinks

  • Hyperlink all labels in the breadcrumb except the last one (which corresponds to the title of the current page.)
  • Never hyperlink the separator sign or the spaces that separate the labels.
  • The hyperlink should be styled the same regardless of whether it has been visited or not.

Other Considerations

  • Never display a breadcrumb on the site’s topmost page.
  • The breadcrumb sometimes corresponds to the user’s recent browsing history, but is not equivalent to it.
  • Dynamically include the titles of user-generated content pages as appropriate.

Why to use it?

  • Breadcrumbs provide context relative to the rest of the site.
  • Breadcrumbs provide a quick way to navigate up the site hierarchy.
  • Breadcrumbs use very little screen real estate.
  • Breadcrumbs let the user see the choices he has done while refining the search.
  • The term ‘Breadcrumb’ can be misleading. It implies that this is the trail that got us here and will take us back the way we came. In reality, our Breadcrumbs pattern is more like Homeward Path as described in the Diemen Patterns Repository. However, we chose the name ‘Breadcrumbs’ since it is the most common name for this idiom.

Accessibility

  • Each breadcrumb label should match the corresponding page title / selected attribute.
  • Allow the breadcrumb and each link to be navigated to with the Tab key.
  • When an individual breadcrumb label has keyboard focus, the Enter key will navigate to the linked page.

Sources

This pattern is based on the “Hover Invitation” pattern from Open Design Patterns.

Useful linksUseful links icon

Example images (2 examples)

Comments

  • David (www) July 26, 2010 02:19

    Its nice when u have static pages tree, or maybe limit the number of levels shown and the characters for link title.

    Its a issue of design scalability.