Skip to content
Astro Breadcrumbs

Disable or remove crumb(s)

Disable first crumb

Mark the first crumb as disabled by setting the aria-disabled attribute to true.

<Breadcrumbs customizeLinks={[{ index: 0, "aria-disabled": true }]} />

To prevent clicking on it you can do something like this:

.c-breadcrumbs__link[aria-disabled="true"] {
  pointer-events: none;
  cursor: default;
}

Disable last crumb

You can to the same with the last crumb.

<Breadcrumbs customizeLinks={[{ index: "last", "aria-disabled": true }]} />

Disable specific crumb

You can also disable a specific crumb by setting the aria-disabled attribute to true.

<Breadcrumbs customizeLinks={[{ index: 1, "aria-disabled": true }]} />

Targets the second link item

Instead of adding an attribute to disable the crumb, you can remove it from the list of crumbs. Therefore, you can use the special key remove in the customizeListElements array.

Remove first crumb

Set the index to 0 and the remove key to true.

<Breadcrumbs customizeListElements={[{ index: 0, remove: true }]}

Remove last crumb

With the index set to last and the remove key to true, you can remove the last crumb.

<Breadcrumbs customizeListElements={[{ index: "last", remove: true }]}

You can do the same with excludeCurrentPage.

<Breadcrumbs excludeCurrentPage={true} />

Remove specific crumb

You can also remove a specific crumb by setting the index to the index of the crumb you want to remove.

<Breadcrumbs customizeLinks={[{ index: 1, remove: true }]} />