Breadcrumbs

List of links to allow users to navigate the page tree.

React
CSS

export const breadcrumbItems = [
  { label: "path", href: "/path" },
  { label: "to", href: "/path/to" },
  { label: "file" },
];

<Breadcrumbs items={breadcrumbItems} />

<nav aria-label="breadcrumbs" class="breadcrumbs">
  <ol>
    <li class="breadcrumbs_item"><a href="/path">Path</a></li>
    <li class="breadcrumbs_item"><a href="/path/to">To</a></li>
    <li class="breadcrumbs_item"><p aria-current="page">File</p></li>
  </ol>
</nav>

Props

Separator

React
CSS

<Breadcrumbs items={breadcrumbItems} />
<Breadcrumbs items={breadcrumbItems} separator="arrow" />

<nav aria-label="breadcrumbs" class="breadcrumbs">
  <ol>
    <li class="breadcrumbs_item"><a href="/path">Path</a></li>
    <li class="breadcrumbs_item"><a href="/path/to">To</a></li>
    <li class="breadcrumbs_item"><p aria-current="page">File</p></li>
  </ol>
</nav>

<nav aria-label="breadcrumbs" class="breadcrumbs breadcrumbs-arrow">
  <ol>
    <li class="breadcrumbs_item"><a href="/path">Path</a></li>
    <li class="breadcrumbs_item"><a href="/path/to">To</a></li>
    <li class="breadcrumbs_item"><p aria-current="page">File</p></li>
  </ol>
</nav>

Props​

Separator​

Props

Separator