Breadcrumb
Indicate the current page’s location within a navigational hierarchy that uses CSS to add separators automatically.
Breadcrumb provides contextual information about page hierarchy.
When to use
- Breadcrumbs allow a user to navigate “up” to a parent section instead of “Back” to the previous page. Use breadcrumbs to help users navigate and understand the structure of the application.
Guidelines
- Breadcrumbs can aid the user experience as it shows people a way out.
- The breadcrumb generally starts with ‘home’ page and end with the parent section of the current page.
- Breadcrumbs should be above all the page's main content.
- Use the same wording in breadcrumb text as in the page title.
- Do not use the breadcrumbs component in application with a flat structure, or to show progress through a linear journey or transaction (example of application with flat structure is a “Single page application”).
- If using other navigational elements on the page, such as a sidebar, consider whether the users need the additional support of breadcrumbs.
Basic
Breadcrumb provides contextual information about page hierarchy.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Computer</a></li>
<li class="breadcrumb-item"><a href="#">Notebook</a></li>
<li class="breadcrumb-item"><a href="#">Accessories</a></li>
<li class="breadcrumb-item"><a href="#">Backpacks</a></li>
<li class="breadcrumb-item active" aria-current="page">Item</li>
</ol>
</nav>
Accessibility
- The aria-current attribute is used to identify the current page.
- Each page link in the breadcrumb is reached by Tab and activated by Enter.