This is the Vuetify 3 documentation, examples and information may be broken or outdated.

Toolbars

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.

Usage

A toolbar is a flexible container that can be used in a number of ways. By default, the toolbar is 64px high on desktop and 56px high on mobile. There are a number of helper components available to use with the toolbar. The v-toolbar-title is used for displaying a title and v-toolbar-items allow v-btn to extend full height.

API

Caveats

Examples

Props

Background

Toolbars can display a background as opposed to a solid color using the src prop. This can be modified further by using the img slot and providing your own v-img component. Backgrounds can be faded using a v-app-bar

v-toolbar/prop-background.vue

Collapse

Toolbars can be collapsed to save screen space.

v-toolbar/prop-collapse.vue

Dense toolbars

Dense toolbars reduce their height to 48px. When using in conjunction with the prominent prop, will reduce height to 96px.

v-toolbar/prop-dense.vue

Extended

Toolbars can be extended without using the extension slot.

v-toolbar/prop-extended.vue

Extension height

The extension’s height can be customized.

v-toolbar/prop-extension-height.vue

Light and Dark

Toolbars come in 2 variants, light and dark. Light toolbars have dark tinted buttons and dark text whereas dark toolbars have white tinted buttons and white text.

v-toolbar/prop-light-and-dark.vue

Prominent toolbars

Prominent toolbars increase the v-toolbar’s height to 128px and positions the v-toolbar-title towards the bottom of the container. This is expanded upon in v-app with the ability to shrink a prominent toolbar to a dense or short one.

v-toolbar/prop-prominent.vue

Misc

Contextual action bar

It is possible to update the appearance of a toolbar in response to changes in app state. In this example, the color and content of the toolbar changes in response to user selections in the v-select.

v-toolbar/misc-contextual-action-bar.vue

Flexible and card toolbar

In this example we offset our card onto the extended content area of a toolbar using the extended prop.

v-toolbar/misc-flexible-and-card.vue

Variations

A v-toolbar has multiple variations that can be applied with themes and helper classes. These range from light and dark themes, colored and transparent.

v-toolbar/misc-variations.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.