Breadcrumb: use custom action instead of link

[KevinCocquyt39]

Description

Because of the way Nuxt routing works and how we set up our Product List Page (PLP) with searching, filtering and paging, it's not really possible to go back to the previous page after selecting a category or search term by clicking on a link within the breadcrumb.

For that, I re-created the breadcrumb keeping the styling but extending it with an "action" property.

Example: the breadcrumb looks like "HOME > CATALOG > BEER".

This is the interface where I added an optional "action" property.

export interface BreadcrumbLink {
  icon?: string | null;
  label?: string | null;
  to?: string | null;
  action?: Function | null;
}

The action is then used to clear the categoryId property and reset the pagination in our Catalog composable so our request could trigger again before showing the updated items in our PLP.

links.push({
  label: "Catalog",
  action: () => { categoryId.value = undefined; page.value = 1; },
});

This is the part in our custom breadcrumb where the action can be triggered when it was applied.

<span v-else-if="link.action" class="...">
  <span v-if="link.icon" class="... cursor-pointer" :class="link.icon" @click="link.action" />
  <span v-else class="... cursor-pointer" @click="link.action">{{ link.label }}</span>
  <span class="i-heroicons-chevron-right-20-solid ..." role="presentation" />
</span>

Could this be a valid enhancement to add to the official component?

Additional context

No response

[KevinCocquyt39]

If it is, then that's not entirely clear in the docs (https://ui.nuxt.com/components/breadcrumb#props).

[benjamincanac]

Have you tried passing a click function? This component uses ULink underneath which renders a button when no to prop is passed.

[KevinCocquyt39]

I might try that, although (maybe not related but a bug I should report) "custom: true" does not seem to work as it keeps on rendering a wrapper anchor tag.