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="#" rel="noopener">
        <span class="bux-breadcrumb__link__text bux-link__text--underline">
          Home
        </span>
      </a>
    </li>
    <li class="bux-breadcrumb__item">
      <a class="bux-breadcrumb__link" href="#" rel="noopener">
        <span class="bux-breadcrumb__link__text bux-link__text--underline">
          Level 1
        </span>
      </a>
    </li>
    <li class="bux-breadcrumb__item">
      <a class="bux-breadcrumb__link" href="#" rel="noopener">
        <span class="bux-breadcrumb__link__text bux-link__text--underline">
          Level 2
        </span>
      </a>
    </li>
    <li
      class="bux-breadcrumb__item bux-breadcrumb__item--current"
      aria-current="page"
    >
      Level 3
    </li>
  </ol>
</nav>

{#
Buckeye UX - version 1.5.1
Copyright (C) 2026 The Ohio State University
#}

{#

Breadcrumb

Available Variables:
  - breadcrumb:  Array containing the breadcrumb link list: url, text.

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 04-01-2026 14:01:27
#}

<nav aria-label="Breadcrumb" class="bux-breadcrumb">
  <ol class="bux-breadcrumb__list">
    {% set clean_breadcrumb = [] %}
    {% for item in breadcrumb %}
      {% if item.text %}
        {% set clean_breadcrumb = clean_breadcrumb|merge([item]) %}
      {% endif %}
    {% endfor %}
    {% if (clean_breadcrumb|length) >= 7 %}
      {% for item in clean_breadcrumb|slice(0, 1) %}
        <li class="bux-breadcrumb__item">
          {% if item.url %}
            {% include '@bux/link/link.twig' with {
              base_class: 'bux-breadcrumb__link',
              link_url: item.url,
              link_text: item.text
            } %}
          {% else %}
            {{ item.text }}
          {% endif %}
        </li>
      {% endfor %}
      {% set breadcrumb_length = clean_breadcrumb|length %}
      {% set context_count = breadcrumb_length - 3 %}
      {% set context_menu_items = clean_breadcrumb|slice(1, context_count) %}
      <li class="bux-breadcrumb__item">
        {% include '@bux/context-menu/context-menu.twig' with {
          items: context_menu_items,
          label: 'more breadcrumbs',
          trigger_icon: 'dots-h'
        } %}
      </li>
      {% set tail_start = breadcrumb_length - 2 %}
      {% for item in clean_breadcrumb|slice(tail_start) %}
        {% 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 %}
              {% include '@bux/link/link.twig' with {
                base_class: 'bux-breadcrumb__link',
                link_url: item.url,
                link_text: item.text
              } %}
            {% else %}
              {{ item.text }}
            {% endif %}
          </li>
        {% endif %}
      {% endfor %}
    {% else %}
      {% for item in clean_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 %}
              {% include '@bux/link/link.twig' with {
                base_class: 'bux-breadcrumb__link',
                link_url: item.url,
                link_text: item.text
              } %}
            {% 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="#" rel="noopener">
        <span class="bux-breadcrumb__link__text bux-link__text--underline">
          Home
        </span>
      </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" rel="noopener">
              <span class="item__link__text">Level 1</span>
            </a>
          </li>
          <li class="bux-context-menu__item">
            <a class="item__link" rel="noopener">
              <span class="item__link__text">Level 2</span>
            </a>
          </li>
          <li class="bux-context-menu__item">
            <a class="item__link" rel="noopener">
              <span class="item__link__text">Level 3</span>
            </a>
          </li>
          <li class="bux-context-menu__item">
            <a class="item__link" rel="noopener">
              <span class="item__link__text">Level 4</span>
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="bux-breadcrumb__item">
      <a class="bux-breadcrumb__link" href="#" rel="noopener">
        <span class="bux-breadcrumb__link__text bux-link__text--underline">
          Level 5
        </span>
      </a>
    </li>
    <li
      class="bux-breadcrumb__item bux-breadcrumb__item--current"
      aria-current="page"
    >
      Level 6
    </li>
  </ol>
</nav>

{#
Buckeye UX - version 1.5.1
Copyright (C) 2026 The Ohio State University
#}

{#

Breadcrumb

Available Variables:
  - breadcrumb:  Array containing the breadcrumb link list: url, text.

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 04-01-2026 14:01:27
#}

<nav aria-label="Breadcrumb" class="bux-breadcrumb">
  <ol class="bux-breadcrumb__list">
    {% set clean_breadcrumb = [] %}
    {% for item in breadcrumb %}
      {% if item.text %}
        {% set clean_breadcrumb = clean_breadcrumb|merge([item]) %}
      {% endif %}
    {% endfor %}
    {% if (clean_breadcrumb|length) >= 7 %}
      {% for item in clean_breadcrumb|slice(0, 1) %}
        <li class="bux-breadcrumb__item">
          {% if item.url %}
            {% include '@bux/link/link.twig' with {
              base_class: 'bux-breadcrumb__link',
              link_url: item.url,
              link_text: item.text
            } %}
          {% else %}
            {{ item.text }}
          {% endif %}
        </li>
      {% endfor %}
      {% set breadcrumb_length = clean_breadcrumb|length %}
      {% set context_count = breadcrumb_length - 3 %}
      {% set context_menu_items = clean_breadcrumb|slice(1, context_count) %}
      <li class="bux-breadcrumb__item">
        {% include '@bux/context-menu/context-menu.twig' with {
          items: context_menu_items,
          label: 'more breadcrumbs',
          trigger_icon: 'dots-h'
        } %}
      </li>
      {% set tail_start = breadcrumb_length - 2 %}
      {% for item in clean_breadcrumb|slice(tail_start) %}
        {% 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 %}
              {% include '@bux/link/link.twig' with {
                base_class: 'bux-breadcrumb__link',
                link_url: item.url,
                link_text: item.text
              } %}
            {% else %}
              {{ item.text }}
            {% endif %}
          </li>
        {% endif %}
      {% endfor %}
    {% else %}
      {% for item in clean_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 %}
              {% include '@bux/link/link.twig' with {
                base_class: 'bux-breadcrumb__link',
                link_url: item.url,
                link_text: item.text
              } %}
            {% 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