View on GitHub

Breadcrumb

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

On this page

You can find here the OUDS Breadcrumb design guidelines.

Basic example

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

Behavior on smaller viewports

Breadcrumb will not 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