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:

customBaseUrl

Type: string

In most cases it is not necessary to enter the base url, as this value is taken from the Astro Config.

If your project has special requirements that make it impossible to use base, you can use customBaseUrl to overwrite the base url used by Astro.

Usage:

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


<Breadcrumbs customBaseUrl="my-base-url" />

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:

linkTextFormat

Type: "lower" | "capitalized" | "sentence"

Controls the text transformation of all link texts.

  • lower: Transforms the link text to lower case.
    • astro-breadcrumbs => astro breadcrumbs
  • capitalized: Transforms the link text to capitalized case.
    • astro-breadcrumbs => Astro Breadcrumbs
  • sentence: Transforms the link text to sentence case.
    • astro-breadcrumbs => Astro breadcrumbs

Usage:

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


<Breadcrumbs linkTextFormat="capitalized" />

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>

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:

Deprecated Properties

baseUrl

Deprecated: v2.0.0

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" />

trailingSlash

Deprecated: v2.0.0

Type: boolean

Default: false

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

Usage:

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


<Breadcrumbs trailingSlash={true} />