Toolbar

The v-toolbar component is pivotal to any 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.

<template>
<div>
<v-toolbar>
<v-toolbar-title>Title</v-toolbar-title>
<div class="flex-grow-1"></div>
<v-toolbar-items>
<v-btn text>Link 1</v-btn>
<v-btn text>Link 2</v-btn>
<v-btn text>Link 3</v-btn>
</v-toolbar-items>

<template v-if="$vuetify.breakpoint.smAndUp">
<v-btn icon>
<v-icon>mdi-export-variant</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-delete-circle</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-plus-circle</v-icon>
</v-btn>
</template>
</v-toolbar>
</div>
</template>
Last Updated 5 years ago
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages