Breadcrumbs
Secondary navigation that indicates a user's location within an app or website.
Examples
Breadcrumbs are a type of secondary navigation that reveal the user's location in a website. Generally going all the way back to the site homepage.
Usage
Breadcrumbs are particularly useful when users arrive at the site through an external link and don’t start with the homepage. They should show the current location in the hierarchal structure of the site or application, not the session history.
Do:
- position breadcrumbs in the top left of the application header
- ensure each page link title is short and descriptive of the location it links to
- ensure the last item in the breadcrumb is the current page and that it is styled differently from the breadcrumb links
- conduct user testing to ensure that your breadcrumbs are intuitive and effective
Avoid:
- using breadcrumbs as a replacement for the global or local navigation
References
NN/g Nielson Norman Group
Breadcrumbs - 11 Design Guidelines for Desktop and Mobile
<turas-breadcrumb>
<turas-breadcrumb-item breadcrumb-is-home>
<a asp-controller="Home" asp-action="Index" asp-area="Home" aria-label="Home"></a>
</turas-breadcrumb-item>
<turas-breadcrumb-item>
<a asp-controller="Home" asp-action="Index" asp-area="Components">Components</a>
</turas-breadcrumb-item>
<turas-breadcrumb-item breadcrumb-is-active>
Breadcrumbs
</turas-breadcrumb-item>
</turas-breadcrumb>
<nav class="" id="breadcrumbs" aria-label="breadcrumb"><ol class="breadcrumb" id="breadcrumbInner">
<li class="breadcrumb-item " id="breadcrumbHome">
<a aria-label="Home" href=""></a>
</li>
<li class="breadcrumb-item ">
<a href="">Components</a>
</li>
<li class="breadcrumb-item active " aria-current="page">
Breadcrumbs
</li>
</ol></nav>
Optional parameters
- breadcrumb-is-home - sets the home breadcrumb to display the home icon
(Note: the developer must add aria-label="Home" on the HTML <a> Tag to comply with accessibility) - breadcrumb-is-active - sets the active breadcrumb and adds aria-current="page" for accessiblity
Accessibility status
This component is fully compliant with the WCAG 2.2 standard.
Testing
- check keyboard navigation to ensure the breadcrumb does not trap keyboard focus
- check that all interactive elements within the breadcrumb are accessible with a keyboard
- check focus is visible
- test breadcrumb with screen readers to ensure content is announced as expected
Developer considerations
- make sure that the breadcrumb is consistently in the same place on every page
- make sure breadcrumb code is semantically correct by using the HTML <NAV> tag for the navigation element for the menu
- if you are using the "Home" icon make sure to use aria-label="Home" to let assistive technologies know the purpose of the icon
- make sure appropriate ARIA is added such as aria-label="breadcrumbs" this will let assistive technologies know what type of navigation it is
- make use of the aria-current="page" attribute to enhance the experience for assistive technologies to let them know they are on the current page
