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-drawerand v-card.


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-btnto extend full height.


v-toolbarPrimary Component
v-toolbar-itemsSub-component used to modify the styling of v-btn
v-toolbar-titleSub-component used to display the title of the toolbar
v-btnSub-component commonly used in v-toolbar





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-imgcomponent. Backgrounds can be faded using a v-app-bar


Toolbars can be collapsed to save screen space.

Dense toolbars

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


Toolbars can be extended without using the extension slot.

Extension height

The extension’s height can be customized.

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.

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-barwith the ability to shrink a prominent toolbar to a dense or short one.


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.

Flexible and card toolbar

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


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.

Ready for more?

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