Questions about Customizing Breadcrumb

[Jarzka]

Hi

Is there a way to customize the Breadcrumb in the following way:

1. Exclude some pages from the Breadcrumb. For example, I have pages like /fi/greeting/hello and /en/greeting/hello, I want to exclude the root route. Currently my BreadCrumb renders as "Home (Root) > Fi > Greeting > Hello", but I want to render it as "Fi > Greeting > Hello", excluding the root route.

2. Include the current page in Breadcrumb but render it as non-link? Currently the current page can only be removed with excludeCurrentPage, but I would like to include it as text.

3. Use a custom name for some part of the Breadcrumb. For example, if my path is /en/greeting/hello, I would like to render the "greeting" text as "Cool texts", resulting "En > Cool Texts > Hello"

[felix-berlin]

Hi @Jarzka,

if you like to highly customize your breadcrumbs, you can use the crumbs prop (point 1. - 3.).

If you like to do this more dynamic, you can get your crumbs like that const paths = Astro.url.pathname.split("/").filter((crumb: any) => crumb); .

[felix-berlin]

I could provide an update for point 2. in the future. However, I can't say exactly when this will happen.

[Kim-Lee-Lin]

Hello, is it any way to change Breadcrumb's title? now it's taking folder name as title but I want it to take each page <title></title> value. I dont want to use this one

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",
},
];

because url is satisfying me and I dont want to create extra value.
Is there any solution ?

[felix-berlin]

Hi, please try the latest beta release with the new props, see #277 (comment)