#How to create custom Breadcrumbs with click handlers in vuetify 3?

16 messages · Page 1 of 1 (latest)

indigo wind
#

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 official help (https://vuetifyjs.com/en/components/breadcrumbs/) and API (https://vuetifyjs.com/en/api/v-breadcrumbs-item/), but can't see any mention of click-handling.

Thanks in advance for any suggestions!

tranquil ibex
#

passing strings makes the breadcrumbs component "inactive"

#

tho you can pass it v-breadcrumbs-items

#

those components can have a href or to attribute

#

but I think you can simply not pass them

#

and use a simple v-on:click on those to detect a click and change the state

indigo wind
#

Thx @tranquil ibex - I know you must be right, but alas, my code is not playing ball.

I'm currently trying this...

<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>

...but

a) The items are still not clickable, and

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

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

tranquil ibex
#

oh

# 
<template>
  <div>
    <v-breadcrumbs
      :items="items"
      divider="-"
    ></v-breadcrumbs>

    <v-breadcrumbs
      :items="items"
      divider="."
    ></v-breadcrumbs>
  </div>
</template>
# 
  export default {
    data: () => ({
      items: [
        {
          title: 'Dashboard',
          disabled: false,
          href: 'breadcrumbs_dashboard',
        },
        {
          title: 'Link 1',
          disabled: false,
          href: 'breadcrumbs_link_1',
        },
        {
          title: 'Link 2',
          disabled: true,
          href: 'breadcrumbs_link_2',
        },
      ],
    }),
  }
#

yeah, not very flexible 🤔

indigo wind
#

Yeah. Maybe it's not meant to be done the way I'm trying?
(It seems geared to normal page routing) 🤷‍♂️

tranquil ibex
#

it just hasn't been designed with SPA / manual state mamangement in mind

#

Vue is mostly used by simple projects, so it kinda makes sense
what you are asking is a bit more advanced than what most ppl do with Vue