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
Folwell breadcrumb styles are available out of the box.
- 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.
- 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.