Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create vuetify toolbar link dropdown menu?

Go to https://vuetifyjs.com/en/components/toolbars

On the top left toolbar we see links: store, support, ecosystem, version, locate

How do I create this style of toolbar button link (with dropdown items)?

(I am unable to find an example)

like image 818
001 Avatar asked Jan 24 '19 00:01

001


People also ask

What is activator in Vuetify?

VMenu allows users to specify a slotted template named activator , containing component(s) that activate/open the menu upon certain events (e.g., click ). VMenu provides listeners for those events via an object, passed to the activator slot: <v-menu> <template v-slot:activator="scopeDataFromVMenu"> <!--

What is V toolbar?

The v-toolbar component is pivotal to any graphical user interface (GUI), as it generally is the primary source of site navigation. The toolbar component works great in conjunction with v-navigation-drawer and v-card .


2 Answers

It's a simple plain menu component.
Click on the example button (dropdown) and on "support" and you will see, that they behave the same.
If you inspect the "support" button with your browser (Firefox, Chrome Shortcut F12 for both),
you can see thats a "v-menu"(menu component) and you can see the CSS used for it.

like image 96
mava Avatar answered Oct 07 '22 03:10

mava


<template>
<div>
        <v-toolbar rounded tile>
        <v-app-bar-nav-icon> </v-app-bar-nav-icon>
        <v-app-bar-title>
            <route-link to="/" tag style="cursor:pointer">ProjectName</route-link>
        </v-app-bar-title>
        <v-spacer></v-spacer>
        <v-toolbar-items>
            <v-btn flat to="/">
                Home
            </v-btn>
            <v-menu :rounded="rounded" open-on-hover offset-y transition="slide-x-transition" bottom right>
                <template v-slot:activator="{ on, attrs }">
                    <v-btn flat v-bind="attrs" v-on="on">
                        Services
                    </v-btn>
                </template>
                <v-list dense>
                    <v-list-item v-for="(item, index) in services" :key="index" router :to="item.link">
                       <v-list-item-action>
                            <v-list-item-title>{{ item.title }}</v-list-item-title>
                        </v-list-item-action>
                    </v-list-item>
                </v-list>
            </v-menu>
            <v-btn to="/about" flat>
                About Us
            </v-btn>
            <v-btn to="/contact" flat>
                Contact Us
            </v-btn>
        </v-toolbar-items>
        <v-spacer></v-spacer>
        <v-toolbar-items class="hidden-sm-and-down">
            <v-btn to="/signup" flat>Sign Up </v-btn>
            <v-btn to="/login" flat>login</v-btn>
        </v-toolbar-items>
        <v-menu open-on-hover transition="slide-x-transition" bottom right offset-y>
            <template v-slot:activator="{ on, attrs }">
                <v-btn icon v-bind="attrs" v-on="on">
                    <v-icon>mdi-dots-vertical</v-icon>
                </v-btn>
            </template>
            <v-card class="mx-auto" max-width="300" tile>
                <v-list dense>
                    <v-subheader>THEMES</v-subheader>
                    <v-list-item-group v-model="theme" color="primary">
                        <v-list-item v-for="(item, i) in themes" :key="i" router :to="item.link">
                            <v-list-item-action>
                                <v-icon v-text="item.icon"></v-icon>
                            </v-list-item-action>
                            <v-list-item-action>
                                <v-list-item-title v-text="item.text"></v-list-item-title>
                            </v-list-item-action>
                        </v-list-item>
                    </v-list-item-group>
                </v-list>
            </v-card>
        </v-menu>
    </v-toolbar>
</div>
</template>

<script>
export default {
    data: () => ({
        activate: true,
        theme: 1,
        themes: [{
                text: "Dark",
                icon: "mdi-clock"
            },
            {
                text: "Light",
                icon: "mdi-account"
            }
        ],
        mini: true,
        services: [{
                icon: "mdi-domain",
                title: "Media Monitoring",
                link: "/mmrservices"
            },
            {
                icon: "mdi-message-text",
                title: "Audience Measurement",
                link: "/amrservices"
            },
            {
                icon: "mdi-flag",
                title: "Integration Analysis"
            }
        ]
    })
};
</script>
like image 33
Woriayibapri Hearty Alapher Avatar answered Oct 07 '22 04:10

Woriayibapri Hearty Alapher