Breadcrumb

New

A navigational landmark that shows the user's current location within the site hierarchy. Built on the DaisyUI .breadcrumbs utility with full accessibility support via <nav aria-label="Breadcrumb"> and aria-current="page" on the active item.

API Reference

c-breadcrumb

Attribute	Description	Type	Default
`size`	Text size applied to the entire breadcrumb trail	string	`md`

c-breadcrumb.item

Attribute	Description	Type	Default
`href`	URL for the breadcrumb link. When empty the item renders as plain text (no anchor)	string	`""`
`active`	Marks the current page item. Suppresses the link even if `href` is set, and adds `aria-current="page"`	boolean	`False`

size

xs sm md lg

Landmark: the component renders a <nav aria-label="Breadcrumb"> element, which is exposed as a navigation landmark to assistive technologies.

Current page: pass active (or :active="True") on the last item. This adds aria-current="page" to the <li> so screen readers announce it as the current location and do not render a redundant link.

Ordered list: items are wrapped in an <ol>, conveying the ordered hierarchy to screen readers without requiring extra ARIA roles.

Examples

Usage


<c-breadcrumb>
  <c-breadcrumb.item href="/">Home</c-breadcrumb.item>
  <c-breadcrumb.item href="/components">Components</c-breadcrumb.item>
  <c-breadcrumb.item active>Breadcrumb</c-breadcrumb.item>
</c-breadcrumb>

Basic

<c-breadcrumb>
  <c-breadcrumb.item href="/">Home</c-breadcrumb.item>
  <c-breadcrumb.item href="/components">Components</c-breadcrumb.item>
  <c-breadcrumb.item active>Breadcrumb</c-breadcrumb.item>
</c-breadcrumb>

With Icons

<c-breadcrumb>
  <c-breadcrumb.item href="/">
    <span class="flex items-center gap-1">
      <c-icon name="home" class="text-sm" />
      Home
    </span>
  </c-breadcrumb.item>
  <c-breadcrumb.item href="/components">
    <span class="flex items-center gap-1">
      <c-icon name="layers" class="text-sm" />
      Components
    </span>
  </c-breadcrumb.item>
  <c-breadcrumb.item active>
    <span class="flex items-center gap-1">
      <c-icon name="navigation" class="text-sm" />
      Breadcrumb
    </span>
  </c-breadcrumb.item>
</c-breadcrumb>

Size Variants

xs

sm

md

lg

<c-breadcrumb size="xs">...</c-breadcrumb>
<c-breadcrumb size="sm">...</c-breadcrumb>
<c-breadcrumb size="md">...</c-breadcrumb>
<c-breadcrumb size="lg">...</c-breadcrumb>