Breadcrumbs

A trail of links back up a hierarchy.

Installation

pnpmnpmyarnbun

pnpm dlx zazz-ui add breadcrumbs

npx zazz-ui add breadcrumbs

yarn dlx zazz-ui add breadcrumbs

bunx zazz-ui add breadcrumbs

Also adds fields, kbd, button, which it depends on. Run zazz-ui init first if the project has no zazz/ folder yet.

Examples

PreviewHTML

<nav
  style="
    --display: flex;
    --items: center;
    --gap: 2;
  "
>
  <menu
    style="
      --display: flex;
      --items: center;
      --gap: 2;
    "
  >
    <li><a data-ui="button" data-button-variant="link">Home</a></li>
    <li>
      <span
        style="
          --text: var(--color-muted-foreground);
          --opacity: 0.5;
        "
        >/</span
      >
    </li>
    <li>
      <div data-ui="button" data-button-variant="link" aria-disabled="true">Product name</div>
    </li>
  </menu>
</nav>

Attributes

This primitive is a composition of other primitives and utilities: it has no presets, slots, or hooks of its own. Copy its example and adapt it.

Requires: button.