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.

[moshetanzer]

Hey Kevin,

Did this solve your issue?

[KevinCocquyt39]

Hey Kevin,

Did this solve your issue?

As it's been a very busy period at work (and won't stop for the foreseeable future), I didn't have the time yet to properly test things out so left it as a custom component.

[hamonCordova]

Same need here. Some solution?

[benjamincanac]

@hamonCordova Did you try the solution I provided above?

[hamonCordova]

Yes. Do not work using "click"

On Thu, Jul 11, 2024, 13:24 Benjamin Canac @.***> wrote:

@hamonCordova https://github.com/hamonCordova Did you try the solution I provided above?

— Reply to this email directly, view it on GitHub https://github.com/nuxt/ui/issues/1796#issuecomment-2223363354, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIJZ6K5UBGVTGZD2KSVK7UTZL2WUFAVCNFSM6AAAAABHZ23RESVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRTGM3DGMZVGQ . You are receiving this because you were mentioned.Message ID: @.***>

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[BulgarianHealer]

bump