Toolbar

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.

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

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.

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.

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.

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

A floating toolbar can be placed over the content that it references.

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 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 reduce their height to 48px. This is also the default behavior for mobile landscape orientation.

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.

You can add menu components to a toolbar.

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