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

v-toolbar
Name
absolute
Default
false
Type
boolean

Components.Toolbars.

Name
app
Default
false
Type
boolean

Components.Toolbars.

Name
card
Default
false
Type
boolean

Components.Toolbars.

Name
clipped-left
Default
false
Type
boolean

Components.Toolbars.

Name
clipped-right
Default
false
Type
boolean

Components.Toolbars.

Name
color
Default
undefined
Type
string

コンポーネントに色を設定します。この色は、定義されている色の名前(例えばsuccesspurple)や、CSSの色指定(#033rgba(255, 0, 0, 0.5))を設定できます。

Name
dark
Default
false
Type
boolean

ダークテーマを適用します。

Name
dense
Default
false
Type
boolean

Components.Toolbars.

Name
extended
Default
false
Type
boolean

Components.Toolbars.

Name
extension-height
Default
undefined
Type
number | string

Components.Toolbars.

Name
fixed
Default
false
Type
boolean

Components.Toolbars.

Name
flat
Default
false
Type
boolean

Components.Toolbars.

Name
floating
Default
false
Type
boolean

Components.Toolbars.

Name
height
Default
undefined
Type
number | string

Components.Toolbars.

Name
inverted-scroll
Default
false
Type
boolean

Components.Toolbars.

Name
light
Default
false
Type
boolean

ライトテーマを適用します。

Name
manual-scroll
Default
false
Type
boolean

Components.Toolbars.

Name
prominent
Default
false
Type
boolean

Components.Toolbars.

Name
scroll-off-screen
Default
false
Type
boolean

Components.Toolbars.

Name
scroll-target
Default
undefined
Type
string

Components.Toolbars.

Name
scroll-threshold
Default
300
Type
number

Components.Toolbars.

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

Components.Toolbars.

Name
tabs
Default
false
Type
boolean

Components.Toolbars.

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.

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.

Edit this page | language on Github