Skip to content
Admin design systemv0.20.1

Breadcrumbs

Examples

Section titled “Examples”

Basic

Section titled “Basic”
<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a class="breadcrumb-item" href="/">Home</a></li>
    <li
      class="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
    ></li>
    <li><a class="breadcrumb-item" href="/users">Users</a></li>
    <li
      class="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
    ></li>
    <li><span class="breadcrumb-item" aria-current="page">Detail</span></li>
  </ol>
</nav>

With a chevron separator

Section titled “With a chevron separator”
<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li>
      <a class="breadcrumb-item" href="/">
        <i class="ti ti-home" aria-hidden="true"></i>
        Home
      </a>
    </li>
    <li class="breadcrumb-separator" role="presentation" aria-hidden="true">
      <i class="ti ti-chevron-right" aria-hidden="true"></i>
    </li>
    <li><a class="breadcrumb-item" href="/users">Users</a></li>
    <li class="breadcrumb-separator" role="presentation" aria-hidden="true">
      <i class="ti ti-chevron-right" aria-hidden="true"></i>
    </li>
    <li><span class="breadcrumb-item" aria-current="page">Detail</span></li>
  </ol>
</nav>

Deep paths

Section titled “Deep paths”
<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a class="breadcrumb-item" href="/">Home</a></li>
    <li
      class="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
    ></li>
    <li><a class="breadcrumb-item" href="/orgs">Organisations</a></li>
    <li
      class="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
    ></li>
    <li><a class="breadcrumb-item" href="/orgs/acme">Acme Inc.</a></li>
    <li
      class="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
    ></li>
    <li>
      <a class="breadcrumb-item" href="/orgs/acme/projects">Projects</a>
    </li>
    <li
      class="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
    ></li>
    <li>
      <a class="breadcrumb-item" href="/orgs/acme/projects/123">Q3 launch</a>
    </li>
    <li
      class="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
    ></li>
    <li><span class="breadcrumb-item" aria-current="page">Settings</span></li>
  </ol>
</nav>

Reference

Section titled “Reference”

React

Section titled “React”
Part Renders Class
Breadcrumbs <nav> wrapping an <ol> breadcrumbs
Breadcrumbs.Item <li> + <a>, or <li> + <span> without an href breadcrumb-item
Breadcrumbs.Separator <li role="presentation" aria-hidden> breadcrumb-separator
Part Prop Type Default
Breadcrumbs separator ReactNode —
Breadcrumbs aria-label string "Breadcrumb"
Breadcrumbs.Item href string —
Breadcrumbs.Item current boolean false
Breadcrumbs.Item icon IconProp —

The root inserts a Separator between every pair of children, so you never write one by hand — pass separator to change the glyph. Omitting href renders a <span>, correct for the last entry; current adds aria-current="page" independently, so set both on an entry that is a link and the current page. Item takes the native attributes of whichever element it renders.

Vanilla

Section titled “Vanilla”
Class Effect
breadcrumbs Root <nav>: text-sm, muted. Its direct <ol> becomes an inline-flex wrapping row, 0.375rem gap
breadcrumb-item One entry, 0.375rem gap for a leading icon, muted until hover
breadcrumb-separator Renders / when empty; a child <i>/<svg> replaces it, sized 0.875rem

Write aria-label="Breadcrumb" on the <nav>, aria-current="page" on the final entry — which also turns off its pointer events — and role="presentation" aria-hidden="true" on each separator so it stays out of the list semantics. Long trails wrap onto a second line.