View on GitHub

Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

On this page

Component design version:

  • Breadcrumb v1.1.0

You can find here the OUDS breadcrumb design guidelines.

Overview

Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. It is strongly advised to add title attributes on each items.

<nav aria-label="basic breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#" title="Home">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page"><span title="Library">Library</span></li>
  </ol>
</nav>

<nav aria-label="full breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#" title="Home">Home</a></li>
    <li class="breadcrumb-item"><a href="#" title="Category 1">Category 1</a></li>
    <li class="breadcrumb-item"><a href="#" title="Sub category B">Sub category B</a></li>
    <li class="breadcrumb-item"><a href="#" title="Sub sub category IV">Sub sub category IV</a></li>
    <li class="breadcrumb-item active" aria-current="page"><span title="Products">Products</span></li>
  </ol>
</nav>
html
Bootstrap $enable-bootstrap-compatibility: true 
<nav aria-label="breadcrumb bs l2">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb bs l3">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Item</li>
  </ol>
</nav>

<nav aria-label="breadcrumb bs l4">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Very long subcategory to test responsive</a></li>
    <li class="breadcrumb-item"><a href="#">Very long subcategory to test responsive 1</a></li>
    <li class="breadcrumb-item"><a href="#">Very long subcategory to test responsive A</a></li>
    <li class="breadcrumb-item active" aria-current="page">Very long page to show off responsiveness behavior</li>
  </ol>
</nav>
html

Layout

Breakpoints behavior

Breadcrumb will never wrap, the number of displayed items depends on the available width, the final two items will always be shown.

Breadcrumb items should not be this long, the following examples are for small viewport demonstration purpose only.

<nav aria-label="large breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/" title="Home">Home</a></li>
    <li class="breadcrumb-item"><a href="#" title="Very long subcategory to test responsive">Very long subcategory to test responsive</a></li>
    <li class="breadcrumb-item active" aria-current="page"><span title="Long current page to test responsive">Long current page to test responsive</span></li>
  </ol>
</nav>

<nav aria-label="very large breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#" title="Home">Home</a></li>
    <li class="breadcrumb-item"><a href="#" title="Very long subcategory to test responsive">Very long subcategory to test responsive</a></li>
    <li class="breadcrumb-item"><a href="#" title="Very long subcategory to test responsive 1">Very long subcategory to test responsive 1</a></li>
    <li class="breadcrumb-item"><a href="#" title="Very long subcategory to test responsive A">Very long subcategory to test responsive A</a></li>
    <li class="breadcrumb-item active" aria-current="page"><span title="Very long page to show off responsiveness behavior">Very long page to show off responsiveness behavior</span></li>
  </ol>
</nav>
html

Avoiding truncation

To prevent a specific item from being truncated, add .flex-shrink-0 on the <li>, this could be useful for brand names like Orange which should never be truncated. The penultimate item has this option set by default so it's not useful to add it. The items will still be hidden on smaller screens.

Be aware that adding this utility to all items would result in an overflow.

<nav aria-label="very large breadcrumb with no truncation on some items">
  <ol class="breadcrumb">
    <li class="breadcrumb-item flex-shrink-0"><a href="#" title="Home">Home</a></li>
    <li class="breadcrumb-item flex-shrink-0"><a href="#" title="Very long subcategory to test responsive">Very long subcategory to test responsive</a></li>
    <li class="breadcrumb-item"><a href="#" title="Very long subcategory to test responsive 1">Very long subcategory to test responsive 1</a></li>
    <li class="breadcrumb-item"><a href="#" title="Very long subcategory to test responsive A">Very long subcategory to test responsive A</a></li>
    <li class="breadcrumb-item active" aria-current="page"><span title="Very long page to show off responsiveness behavior">Very long page to show off responsiveness behavior</span></li>
  </ol>
</nav>
html