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
Position the element absolutely
Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside outside of v-content to function properly
Inherits border radius when used within v-card
Designates that the applications v-navigation-drawer is clipped on the left side of the toolbar
Designates that the applications v-navigation-drawer is clipped on the right side of the toolbar
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))
Applies the dark theme variant
Reduces the height of the toolbar content and extension
Force the toolbar to generate the extension without using the slot
Specify an explicit height for the extended slot
Position the element fixed
Removes the toolbar box-shadow
Makes the toolbar float inline
Designates a specific height for the toolbar
Will slide out of view when scrolling down and back into view when scrolling up
Applies the light theme variant
Manually apply the scroll-off-screen functionality
Increases the height of the toolbar content and extension
Will transition the toolbar and extension off screen when scrolling down
Assign the scroll target for scroll-off-screen
The amount of scroll distance down before the toolbar uses scroll-off-screen
Will transition the toolbar off screen when scrolling down
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.
Floating with search
A floating toolbar can be placed over the content that it references.
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.