django/shadcn-ui

Breadcrumb

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

Installation

uvx django_shadcn@latest add breadcrumb

Usage

<c-breadcrumb>
  <c-breadcrumb.list>
    <c-breadcrumb.item>
      <c-breadcrumb.link href="/">Home</c-breadcrumb.link>
    </c-breadcrumb.item>
    <c-breadcrumb.separator />
    <c-breadcrumb.item>
      <c-breadcrumb.page>Current</c-breadcrumb.page>
    </c-breadcrumb.item>
  </c-breadcrumb.list>
</c-breadcrumb>

The last crumb is a page, not a link: it carries aria-current="page" and is not focusable.

Examples

Custom separator

<c-breadcrumb.separator>/</c-breadcrumb.separator>

Collapsed

<c-breadcrumb.item>
  <c-breadcrumb.ellipsis />
</c-breadcrumb.item>