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.


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.



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.


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.

Dense prominent toolbars

You can combine both the prominent and dense to extend a smaller variant of the toolbar.

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, head to the pre-defined layouts.