@thebase/ui/docs/components/breadcrumb.md

CDN-installable Owl and Bootstrap 5 UI component library.

# Breadcrumb

Displays the path to the current resource using a hierarchy of links.

## Pure Owl component

```js
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@thebase/ui";
```

```base-ui
<div style="max-width: 28rem" class="w-100">
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="'/'">Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator/>
      <BreadcrumbItem>
        <BreadcrumbLink href="'/components'">Components</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator/>
      <BreadcrumbItem>
        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</div>
```

| Component | Prop | Type | Notes |
| --- | --- | --- | --- |
| `Breadcrumb` | `className` | `String` | optional |
| `BreadcrumbList` | `className` | `String` | optional |
| `BreadcrumbItem` | `current` | `Boolean` | optional |
| `BreadcrumbItem` | `className` | `String` | optional |
| `BreadcrumbLink` | `href` | `String` | optional |
| `BreadcrumbLink` | `onClick` | `Function` | optional |
| `BreadcrumbPage` | `className` | `String` | optional |
| `BreadcrumbSeparator` | `className` | `String` | optional; custom children override the chevron |
| `BreadcrumbEllipsis` | `className` | `String` | optional |

See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.

## Static component

```base-ui
<nav b-ui="breadcrumb" aria-label="breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><span b-breadcrumb-ellipsis></span></li>
    <li><a href="/components">Components</a></li>
    <li><span b-breadcrumb-page>Breadcrumb</span></li>
  </ol>
</nav>
```

BaseUI adds the shadcn/Nova breadcrumb classes, inserts chevron separators when none are authored, styles links and the current page, and marks the current page with `aria-current="page"`.

## Dropdown

```base-ui
<nav b-ui="breadcrumb" aria-label="breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li b-breadcrumb-separator aria-hidden="true">·</li>
    <li><span b-ui="dropdown-menu">
      <button b-dropdown-trigger type="button" class="bu-breadcrumb-link">
        <span>Components</span> <span b-icon="chevron-down"></span>
      </button>
      <span b-dropdown-menu>
        <a href="/docs">Documentation</a>
        <a href="/themes">Themes</a>
        <a href="https://github.com">GitHub</a>
      </span>
    </span></li>
    <li b-breadcrumb-separator aria-hidden="true">·</li>
    <li><span b-breadcrumb-page>Breadcrumb</span></li>
  </ol>
</nav>
```

Use `b-breadcrumb-separator` to author a custom separator.

```html
<li b-breadcrumb-separator aria-hidden="true">·</li>
```