Skip to content
Astro Breadcrumbs

Slots

ellipsis

Default: …

Content of the .c-breadcrumbs__truncated-button.

Usage:

---
import { Breadcrumbs } from "astro-breadcrumbs";
---


<Breadcrumbs>
  <svg
    slot="ellipsis"
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    ><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"
    ></circle><circle cx="5" cy="12" r="1"></circle></svg
  >
</Breadcrumbs>

Rendered Component:

index

Default: -

[The first element] If present indexText is deactivated.

Usage:

---
import { Breadcrumbs } from "astro-breadcrumbs";
---


<Breadcrumbs>
  <svg
    slot="index"
    aria-label="Home Page"
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"> </path><polyline
      points="9 22 9 12 15 12 15 22"></polyline>
  </svg>
</Breadcrumbs>

Rendered Component:

separator

Default: -

Add custom elements like svg’s or icons after the <a> tag.

Usage:

---
import { Breadcrumbs } from "astro-breadcrumbs";
---


<Breadcrumbs>
  <svg
    slot="separator"
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    ><polyline points="9 18 15 12 9 6"></polyline>
  </svg>
</Breadcrumbs>

Rendered Component: