Skip to content
Astro Breadcrumbs

Properties

ariaLabel

Type: string

Default: breadcrumbs

Controls the aria-label on the parent element (<nav>).

Usage:

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


<Breadcrumbs ariaLabel="a structured list of pages" />

Rendered Component:

baseUrl

Type: string

Default: undefined

By default Astro-Breadcrumbs creates all links with relative urls. If you have other requirements you can use this property to customize the start of the url.

Usage:

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


<Breadcrumbs baseUrl="https://base.url/page" />

Rendered Component:

crumbs

Type:

interface BreadcrumbItem {
  text: string;
  href: string;
  "aria-current"?: string;
}

Default: []

This property expects an array of objects that describe the breadcrumbs “manually”. There are two required key value pairs: text: '' and href: '', every additional pair will add an attribute to this specific element. For example: title: 'Part of the breadcrumb list', will add an title attribute.

Usage:

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


const customCrumbs = [
  {
    text: "Custom Crumb 1",
    href: "#",
  },
  {
    text: "Custom Crumb 2 - I'm having custom title attribute",
    href: "#",
    title: "Part of the breadcrumb list",
  },
  {
    text: "Custom Crumb 3 - I'm having custom data attribute",
    href: "#",
    "data-custom": "custom data attribute",
  },
];
---


<Breadcrumbs crumbs={customCrumbs} />

Rendered Component:

ellipsisAriaLabel

Type: string

Default: Show hidden navigation

aria-label of the ellipsis button (.c-breadcrumbs__truncated-button).

Usage:

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


<Breadcrumbs ellipsisAriaLabel="a structured list of pages" />

Rendered Component:

indexText

Type: string

Default: Home

Label of the first nav element.

Usage:

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


<Breadcrumbs indexText="Home" />

Rendered Component:

mainBemClass

Type: string

Default: c-breadcrumbs

CSS BEM root class.

Usage:

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


<Breadcrumbs mainBemClass="o-bread-crumb" />

Rendered Component:

schemaJsonScript

Type: boolean

Default: true

Enable or disable the schema.org JSON-LD script tag generation.

Usage:

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


<Breadcrumbs />

Rendered Component:

Output:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "item": {
          "@id": "/",
          "name": "Home"
        }
      },
      {
        "@type": "ListItem",
        "position": 2,
        "item": {
          "@id": "/en",
          "name": "en"
        }
      },
      {
        "@type": "ListItem",
        "position": 3,
        "item": {
          "@id": "/en/properties",
          "name": "properties"
        }
      }
    ]
  }
</script>

trailingSlash

Type: boolean

Default: false

If set to true all links will have a trailing slash.

Usage:

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


<Breadcrumbs trailingSlash={true} />

Rendered Component:

truncated

Type: boolean

Default: false

With the setting true, the breadcrumbs that no longer fit in a line are truncated and an ellipsis button is displayed.

Only the first element and the last element are displayed, with the ellipsis button in between.

A click on the ellipsis button shows all truncated elements.

The calculation is carried out using ResizeObserver and is therefore responsive.

The width of all elements is calculated together and compared with the available width. If the elements are larger than the available width, they are truncated.

Usage:

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


<Breadcrumbs truncated={true} />
astro-breadcrumbs-config.scss
@use "astro-breadcrumbs/breadcrumbs.scss" with (
  $truncated: true
);

Rendered Component: