A breadcrumb provides a trail of links indicating the user’s current location within a website’s hierarchy. It typically appears near the top of a web page or at the top of a content section, serving as a secondary navigation aid.

When to use

Use breadcrumbs on your website if you have a hierarchical structure of pages, such as categories and subcategories.

Anatomy

1. Breadcrumb

• Includes link to home page and every subsequent tier up to 4 that leads to current
• Do not include current page in the breadcrumbs.

2. Separator

• Static “/“ used to separate breadcrumb items

Examples

<nav class="ucla-breadcrumb">
  <ul class="ucla-breadcrumb__list">
    <li class="ucla-breadcrumb__list-item">
      <a class="ucla-breadcrumb__link" href="#">Home</a>
    </li>
    <li class="ucla-breadcrumb__list-item">
      <a class="ucla-breadcrumb__link" href="#">Level 1</a>
    </li>
    <li class="ucla-breadcrumb__list-item">
      <a class="ucla-breadcrumb__link" href="#">Level 2</a>
    </li>
  </ul>
</nav>

The breadcrumb is a simple navigation component that’s built using the following structure:

• .ucla-breadcrumb - Main container
  • .ucla-breadcrumb__list - Start of breadcrumb list
    • .ucla-breadcrumb__list-itme - Breadcrumb Item
      • .ucla-breadcrumb__link - Breadcrumb Link

<nav class="ucla-breadcrumb">
    <ul class="ucla-breadcrumb__list">
        <li class="ucla-breadcrumb__list-item">
            <a class="ucla-breadcrumb__link" href="#">Home</a>
        </li>
        <li class="ucla-breadcrumb__list-item">
            <a class="ucla-breadcrumb__link" href="#">Level 1</a>
        </li>
        <li class="ucla-breadcrumb__list-item">
            <a class="ucla-breadcrumb__link" href="#">Level 2</a>
        </li>
    </ul>
</nav>

Note: Do not include the current page in the breadcrumb. Instead, the breadcrumb should sit right above the page title.

Current Page Title

<nav class="ucla-breadcrumb">
    <ul class="ucla-breadcrumb__list">
        <li class="ucla-breadcrumb__list-item">
            <a class="ucla-breadcrumb__link" href="#">Home</a>
        </li>
        <li class="ucla-breadcrumb__list-item">
            <a class="ucla-breadcrumb__link" href="#">Level 1</a>
        </li>
        <li class="ucla-breadcrumb__list-item">
            <a class="ucla-breadcrumb__link" href="#">Level 2</a>
        </li>
    </ul>
</nav>
<h1 class="headline-text__xl">Current Page Title</h1>