Toolbar

The v-toolbar component is pivotal to any gui, as it generally is the primary source of site navigation. The toolbar component works great in conjunction with a navigation drawer for hiding links and presenting an activator to open the sidebar on mobile.

Usage

A toolbar is a flexible container that can be utilized in a number of ways. By default, the toolbar is 64px high on desktop, 56px high on mobile portrait and 48px high on mobile landscape. There are a number of helper components available to use with the toolbar. These are v-toolbar-side-icon, v-toolbar-title and v-toolbar-items.


API

Name
absolute
Default
false
Type
boolean

Position the element absolutely

Name
app
Default
false
Type
boolean

Designates the component as part of the application layout. Used for dynamically adjusting content sizing

Name
card
Default
false
Type
boolean

Inherits border radius when used within v-card

Name
clipped-left
Default
false
Type
boolean

Designates that the applications v-navigation-drawer is clipped on the left side of the toolbar

Name
clipped-right
Default
false
Type
boolean

Designates that the applications v-navigation-drawer is clipped on the right side of the toolbar

Name
color
Default
undefined
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
dense
Default
false
Type
boolean

Reduces the height of the toolbar content and extension

Name
extended
Default
false
Type
boolean

Force the toolbar to generate the extension without using the slot

Name
extension-height
Default
undefined
Type
number | string

Specify an explicit height for the extended slot

Name
fixed
Default
false
Type
boolean

Position the element fixed

Name
flat
Default
false
Type
boolean

Removes the toolbar box-shadow

Name
floating
Default
false
Type
boolean

Makes the toolbar float inline

Name
height
Default
undefined
Type
number | string

Designates a specific height for the toolbar

Name
inverted-scroll
Default
false
Type
boolean

Will slide out of view when scrolling down and back into view when scrolling up

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
manual-scroll
Default
false
Type
boolean

Manually apply the scroll-off-screen functionality

Name
prominent
Default
false
Type
boolean

Increases the height of the toolbar content and extension

Name
scroll-off-screen
Default
false
Type
boolean

Will transition the toolbar and extension off screen when scrolling down

Name
scroll-target
Default
undefined
Type
string

Assign the scroll target for scroll-off-screen

Name
scroll-threshold
Default
300
Type
number

The amount of scroll distance down before the toolbar uses scroll-off-screen

Name
scroll-toolbar-off-screen
Default
false
Type
boolean

Will transition the toolbar off screen when scrolling down

Name
tabs
Default
false
Type
boolean

Will set an explicit 42px height for extension. Useful when default v-tabs are used in the extended slot. If you have a custom height v-tab, you should specify a height with extensionHeight.

Examples

App bar

An App bar is the primary toolbar of your application. It can contain icons, menus and more.


App bar with items

Utilizing the v-toolbar-items component you can use regular v-btn components to create app bar items. Don't forget to apply the flat prop to each button.


App bar with extension

An extension can be used that creates a much more prominent bar. If a title is placed within the extension, it will automatically be shifted to the right to match the normal location it would be at in the main bar.


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

With a few custom styles, you can easily create your amazing user interfaces.


Variations

An app-bar has multiple variations that can be applied with themes and helper classes. These range from light and dark themes, colored and transparent.


Prominent toolbars

Prominent toolbars add a slot where you can placed elements in the extended area. The content and extension areas will be locked to 64px in height.


Dense toolbars

Dense toolbars reduce their height to 48px. This is also the default behavior for mobile landscape orientation.


Scrolling techniques

A toolbar can transition off screen when scrolling. Here we demonstrate how you can specify the scroll target (default is window). Keep in mind, for this example there is special markup that will not be required in your application.


App bar with menu

You can add menu components to a toolbar.


System bars - status/window

System bars are useful for notification icons on mobile and desktop. For live examples of these, head to the pre-defined layouts.