Properties

indexText

Type: string

Default: Home

Label of the first nav element.

Usage:

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

<Breadcrumbs indexText="Home" />

Rendered Component:

1. Home
2. configuration
3. properties

mainBemClass

Type: string

Default: c-breadcrumbs

BEM root.

Usage:

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

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

Rendered Component:

1. Home
2. configuration
3. 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:

1. Home
2. configuration
3. properties

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. If set dynamic creation will be disabled, indexText and baseUrl will have no affect.

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:

1. Custom Crumb 1
2. Custom Crumb 2 - I'm having custom title attribute
3. Custom Crumb 3 - I'm having custom data attribute

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.

If you use custom crumbs, baseUrl will be disabled.

Usage:

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

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

Rendered Component:

1. Home
2. configuration
3. properties

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:

1. Home
2. configuration
3. properties

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>