Breadcrumb

JSThis component requires JavaScript.

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

Default

<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>

{#
Buckeye UX - version 1.3.1
Copyright (C) 2025 The Ohio State University
#}

{#

Breadcrumb

Available variables:

- breadcrumb:   Array containing the breacrumb link list.
- item.url:     URL for a breadcrumb link item.
- item.text:    Label for a breadcrumb link item.

#}

<nav aria-label="Breadcrumb" class="bux-breadcrumb">
	<ol class="bux-breadcrumb__list">
		{% if breadcrumb|length >= 7 %}
			{% for item in breadcrumb|slice(0,1) %}
					<li class="bux-breadcrumb__item">
						{% if item.url %}
							<a class="bux-breadcrumb__link" href="{{ item.url }}">{{ item.text }}</a>
						{% else %}
							{{ item.text }}
						{% endif %}
					</li>
			{% endfor %}

			{% set context_menu_items = breadcrumb|slice(1,breadcrumb|length - 3) %}
			<li class="bux-breadcrumb__item">
			{% include '@context-menu' with {items: context_menu_items, label: 'more breadcrumbs', trigger_icon: "dots-h"} %}

			{% for item in breadcrumb|slice(breadcrumb|length - 2) %}
				{% 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 %}
		{% else %}
			{% 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 %}
		{% endif %}
	</ol>
</nav>

Overflow

A dropdown that reveals hidden breadcrumb links when space is limited, powered by the Context Menu.

<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">
      <button
        class="bux-popover__trigger bux-context-menu__trigger bux-context-menu__trigger--icon-button"
      >
        <span class="visually-hidden">more breadcrumbs</span>
        <span aria-hidden="true" class="icon icon-dots-h"></span>
      </button>
      <div class="bux-popover__container bux-context-menu__container">
        <div class="bux-popover__caret">
          <svg viewBox="0 0 10 10">
            <path class="caret--chevron"></path>
          </svg>
        </div>
        <div
          class="bux-context-menu__active-item-indicator"
          aria-hidden="true"
        ></div>
        <ul class="bux-popover__body">
          <li class="bux-context-menu__item">
            <a class="item__link" href=""> Level 1 </a>
          </li>
          <li class="bux-context-menu__item">
            <a class="item__link" href=""> Level 2 </a>
          </li>
          <li class="bux-context-menu__item">
            <a class="item__link" href=""> Level 3 </a>
          </li>
          <li class="bux-context-menu__item">
            <a class="item__link" href=""> Level 4 </a>
          </li>
        </ul>
      </div>
    </li>

    <li class="bux-breadcrumb__item">
      <a class="bux-breadcrumb__link" href="#">Level 5</a>
    </li>
    <li
      class="bux-breadcrumb__item bux-breadcrumb__item--current"
      aria-current="page"
    >
      Level 6
    </li>
  </ol>
</nav>

{#
Buckeye UX - version 1.3.1
Copyright (C) 2025 The Ohio State University
#}

{#

Breadcrumb

Available variables:

- breadcrumb:   Array containing the breacrumb link list.
- item.url:     URL for a breadcrumb link item.
- item.text:    Label for a breadcrumb link item.

#}

<nav aria-label="Breadcrumb" class="bux-breadcrumb">
	<ol class="bux-breadcrumb__list">
		{% if breadcrumb|length >= 7 %}
			{% for item in breadcrumb|slice(0,1) %}
					<li class="bux-breadcrumb__item">
						{% if item.url %}
							<a class="bux-breadcrumb__link" href="{{ item.url }}">{{ item.text }}</a>
						{% else %}
							{{ item.text }}
						{% endif %}
					</li>
			{% endfor %}

			{% set context_menu_items = breadcrumb|slice(1,breadcrumb|length - 3) %}
			<li class="bux-breadcrumb__item">
			{% include '@context-menu' with {items: context_menu_items, label: 'more breadcrumbs', trigger_icon: "dots-h"} %}

			{% for item in breadcrumb|slice(breadcrumb|length - 2) %}
				{% 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 %}
		{% else %}
			{% 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 %}
		{% endif %}
	</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'

References

• U.S. Web Design System (USWDS) Breadcrumb
• Breadcrumbs: 11 Design Guidelines for Desktop and Mobile
• Breadcrumb structured data for Google Search results