A toolbar is a flexible container that can be utilized 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.
<v-btn>s with the icon prop are used inside of
v-app-bar they will automatically have their size increased and negative margin applied to ensure proper spacing according to the Material Design Specification. If you choose to wrap your buttons in any container, such as a
<div>, you will need to apply negative margin to that container in order to properly align them.
Column width with hierarchy
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.
Flexible toolbar and card toolbar
In this example we offset our card onto the extended content area of a toolbar using the extended prop.
Floating with search
A floating toolbar is turned into an inline element that only takes up as much space as needed. This is particilarly useful when placing toolbars over content.
v-toolbar has multiple variations that can be applied with themes and helper classes. These range from light and dark themes, colored and transparent.
Prominent toolbars increase the
v-toolbar's height to 128px and positions the
v-toolbar-title towards the bottom of the container. This is exanded upon in v-app with the ability to shrink a prominent toolbar to a dense or short one.
Dense toolbars reduce their height to 48px. When using in conjunction with the prominent prop, will reduce height to 96px.
Contextual action bars
In this example we conntext various item visibility states through a