3
votes

I am trying to create a Navigation Drawer with nested list items like this one: Vuetify Material Dashboard

Here's how are my code looks like

<v-navigation-drawer v-model="drawer" app clipped>
            <v-list dense>
                <template>
                    <div v-for="item in items" :key="item.title">
                        <v-list-group v-if="item.items" v-model="item.active" :prepend-icon="item.action" no-action link>
                            <template v-slot:activator>
                                <v-list-item-content>
                                    <v-list-item-title v-text="item.title"></v-list-item-title>
                                </v-list-item-content>
                            </template>
                            <v-list-item v-for="subItem in item.items" :key="subItem.title" :to="subItem.to">
                                <v-list-item-icon>
                                    <v-icon v-text="subItem.action"></v-icon>
                                </v-list-item-icon>
                                <v-list-item-content>
                                    <v-list-item-title v-text="subItem.title"></v-list-item-title>
                                </v-list-item-content>
                            </v-list-item>
                        </v-list-group>
                        <v-list-item v-else :to="item.to" link>
                            <v-list-item-icon>
                                <v-icon v-text="item.action"></v-icon>
                            </v-list-item-icon>
                            <v-list-item-content>
                                <v-list-item-title v-text="item.title"></v-list-item-title>
                            </v-list-item-content>
                        </v-list-item>
                    </div>
                </template>
            </v-list>
        </v-navigation-drawer>

script:

items: [
                {
                    action: 'fa-chart-line',
                    title: 'Dashboard',
                    to: '/dashboard'
                },
                {
                    action: 'fa-user',
                    title: 'Attractions',
                    items: [
                        {
                            title: 'Home',
                            action: 'fa-barcode',
                            to: '/home'
                        }
                    ]
                },
                {...}
            ]
        }),

However, when I click a non-nested list-item the other items still with the active state, and the active classes have different colors.

enter image description here

I didn't found any example on Vuetify's docs with a menu with nested and non-nested elements but found that template which is exactly what I am looking for.

Does anyone know how to do something like that?

1

1 Answers

3
votes

To solve this you must add group property on v-list-group guided by the URL path you want to keep the group active.

<v-list-group
  :group="'attractions'"
  v-if="item.items"     
  v-model="item.active"
  :prepend-icon="item.action"
  no-action
  link
>
....
</v-list-group>

On the above example your v-list-group will only be active when your route contains 'attractions'