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.
Toolbars can be collapsed to save screen space.
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.
The extension’s height can be customized.
Prominent toolbars increase the v-toolbar’s height to 128px and positions the v-toolbar-title towards the bottom of the container.
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.
A floating toolbar is turned into an inline element that only takes up as much space as needed. This is particularly useful when placing toolbars over content.
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.
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.