Skip to main content

hero banner

Breadcrumbs

Breadcrumbs are used to help visitors further understand the organization of your site and know which page they are on.

Breadcrumbs never cause problems in user testing; people might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them.Jacob Nielsen

Usage, Best Practice, and Accessibility

Example

breadcrumbs screen shot

Usage

Folwell breadcrumb styles are available out of the box.

Best Practice

  • Breadcrumbs should not be used as primary navigation.
  • Use of location-based over attribute-based or path-based breadcrumbs is recommended, depending on the site content.
  • Don't link to the current page. Since visitors are already on the page, it wouldn't be useful.
  • Research shows that breadcrumbs are most often used when positioned near the page title.
  • Use breadcrumbs when designing websites that are three or more levels deep.
  • On mobile, your breadcrumbs should show at least one step back.
  • They should be used consistently from page to page.

Accessibility

  • Breadcrumbs are structured using an ordered list.
  • A < nav > element labeled "Breadcrumb" is used to identify the structure as a breadcrumb trail, making it a navigation landmark that is easy to locate.
  • The "visually-hidden"class is used in CSS so the breadcrumbs are not read to visitors using screen readers.