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
An App bar is the primary toolbar of your application. It can contain icons, menus and more.
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.
You can combine both the prominent and dense to extend a smaller variant of the toolbar.
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.
System bars are useful for notification icons on mobile and desktop. For live examples of, head to the pre-defined layouts.