Skip to main content

Toolbar

The 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 NavigationDrawer and Card.

info

For more details about Vuetify’s usage of Toolbar component, click Toolbar page.
For more prop explanations, click Vuetify Toolbar API page.

Props

AttributeDescriptionTypeDefault
classAllows custom properties to take effect.stringundefined
darkApplies the dark theme.booleanfalse
absoluteApplies position: absolute to the component.booleanfalse
bottomAligns the component towards the bottom.booleanfalse
collapsePuts the toolbar into a collapsed state reducing its maximum width.booleanfalse
colorApplies specified color.stringundefined
denseReduces the height of the toolbar content to 48px.booleanfalse
elevationDesignates an elevation applied to the component between 0 and 24.number0
extendedUse this prop to increase the height of the toolbar without using the extension slot for adding content.booleanfalse
floatingApplies display: inline-flex to the component.booleanfalse
prominentIncreases the height of the toolbar content to 128px.booleanfalse
shortReduce the height of the toolbar content to 56px.booleanfalse
srcSpecifies a Image as the component’s background.stringundefined
tileRemoves the component’s border-radius.booleanfalse
tagpecify a custom tag used on the root element.stringheader
visibleVisibility of Toolbar component.booleantrue