Breadcrumb

Ready

Shows the user’s current location in a page hierarchy and allows them to navigate back through them.

Breadcrumbs are effective in websites that have a large amount of content organized in a hierarchy of more than two levels because they help users understand the organization of the website. They allow a user to navigate quickly to a parent level or previous step.

Breadcrumbs are placed in the top left of the main content column, above the page title.

Example#

<nav aria-label="Breadcrumb" class="bux-breadcrumb">
  <ol class="bux-breadcrumb__list">
      <li class="bux-breadcrumb__item">
          <a class="bux-breadcrumb__link" href="#">Home</a>
      </li>
      <li class="bux-breadcrumb__item">
          <a class="bux-breadcrumb__link" href="#">Level 1</a>
      </li>
      <li class="bux-breadcrumb__item">
          <a class="bux-breadcrumb__link" href="#">Level 2</a>
      </li>
      <li class="bux-breadcrumb__item bux-breadcrumb__item--current" aria-current="page">Level 3</li>
  </ol>
</nav>

<nav aria-label="Breadcrumb" class="bux-breadcrumb">
	<ol class="bux-breadcrumb__list">
		{% for item in breadcrumb %}
			{% if loop.last %}
				<li class="bux-breadcrumb__item bux-breadcrumb__item--current" aria-current="page">{{ item.text }}</li>
			{% else %}
				<li class="bux-breadcrumb__item">
					{% if item.url %}
						<a class="bux-breadcrumb__link" href="{{ item.url }}">{{ item.text }}</a>
					{% else %}
						{{ item.text }}
					{% endif %}
				</li>
			{% endif %}
		{% endfor %}
	</ol>
</nav>

Usage#

Dos#

Use breadcrumbs if content is more than two levels
Use breadcrumbs when it is likely that a user will arrive at an interior page from search or from an external link
Place breadcrumbs in the top left of the main content column, above the page title
Start with “Home” as the first link if “Home” is not in the primary navigation menu

Don’ts#

Don’t use breadcrumbs on the homepage of a website
Don’t use breadcrumbs if content is single level because they create unnecessary clutter

Implementation Notes#

Javascript#

The last item in the breadcrumbs list, the current page, must have the aria-current role set to 'page'