Is it possible to create custom Breadcrumbs with click handlers in Vuetify 3?

[Liquidream]

Hi all,
I'm building a web application using Vuetify 3 and I'd like to use their Breadcrumbs to visualise the "depth" of the user's current position in the app space.

For example, my app has a nested structure of:

• World > Scene > Object

I'd like to have a click-handler on each level, so that I can do the appropriate actions to take the user to that level (sadly, a URL is not going to cut it - as I'm managing state manually with Pinia).

I've been pouring over the help topic and API, but can't see any mention of click-handling 🤔

I've tried something like the snippet below...

<v-breadcrumbs
  :items="[
  {
    title: 'World',
    active: true,
  },
  {
    title: 'Scene',
    active: true,
  },
  {
    title: 'Prop',
  },
 ]"
>
  <template v-slot:divider>
     <v-icon icon="mdi-chevron-right"></v-icon>
  </template>
</v-breadcrumbs>

(I'm using the template as I want to have chevrons ">")

...but

1. The items are still not clickable, and

2. I can't figure out how/where to place the v-breadcrumbs-item within the template

Thanks in advance for any suggestions 🤓

[Liquidream]

For now, I've "faked" it using buttons and icons...

<!-- Breadcrumbs -->
<v-btn variant="plain" @click="backToWorldClicked">World</v-btn>
<v-icon icon="mdi-chevron-right"></v-icon>
<v-btn variant="plain" @click="backToSceneClicked">Scene</v-btn>
<v-icon icon="mdi-chevron-right"></v-icon>
<v-btn variant="plain" disabled>Prop</v-btn>

It's not quite the same, but I think it'll do me for now.

[KaelWD]

Add onClick to the items objects, or use v-breadcrumbs-item and v-breadcrumbs-divider in the default slot instead of the items prop.

[Liquidream]

Thanks for the suggestion, @KaelWD.
I'll see if I can figure out how to implement that later today!