How to highlight selected item in the Vuetify menu?

user_1913115 0
Viewed 35290

I have a menu in the sidebar (using vue-router):

<v-list>
    <v-list-tile
        value="true"
        v-for="(item, i) in menu"
        :key="i"
        :to="item.path"
    >
        {{item.name}}
    </v-list-tile>
</v-list>

and it works just fine, however I don't see anything in the Vuetify docs about highlighting the selected menu item. Any help is appreciated!

UPDATE: it turns out I am not very bright. setting value="true" property ensures all elements are always active, removing that resulted in proper function. duh!

vue-router vuetify.js vue.js menu
1 Answers

Vuetify will by default highlight the active link element by matching against the current route.

CodeSandbox example.

However, if need be, you can control this behavior as shown in the API documents for v-list-tile and the active-class property. You can manually match the current route to the list item using something similar to:

<v-list-tile 
    v-for="(item, i) in menu"
    :key="i"
    :to="item.path" 
    active-class="highlighted"
    :class="item.path === $route.path ? 'highlighted' : ''"
>
    {{item.name}}
</v-list-tile>

See also the linkActiveClass in the Vue Router docs.

user_95561930
Related