Vue Material -


Toolbar actions appear above the view affected by their actions. They may constrain their width to accommodate material passing over them.


Toolbars adjusts its height dimensions based on the screen width to best fit the visible area on small devices. Try to resize your browser to see the difference:

Regular Toolbars


No Elevation




API - md-toolbar

The following options can be applied to all toolbars:

md-transparent Makes the Toolbar background transparent
md-dense Creates a small sized toolbar
md-medium Creates a medium sized toolbar
md-large Creates a large sized toolbar

Different Sizes


Content and Actions

As the Toolbars are mostly used to hold actions that affects the entire application, you can create rows or sections inside of it.

Although those rows works on every toolbar, they were created to separate contents for large toolbars. This element is represented by the md-toolbar-row class. A row can also have a md-toolbar-offset to add a little space on the left of it. This is commonly used inside the second row of an large toolbar.

The sections are used to split the content of the toolbar horizontally (or the row inside). You can apply them using two types of section: md-toolbar-section-start will be left-aligned and md-toolbar-section-end right-aligned.

Rows, Title and Icons


The following classes creates parts of a toolbar:

md-toolbar-row Creates a toolbar row, commonly used on large toolbars
md-toolbar-offset Adds an left offset to any toolbar row. Only works in md-toolbar-row
md-toolbar-section-start Creates a section on the left of a toolbar or toolbar row. Commonly used to hold the application menu button and the title
md-toolbar-section-end Creates a section on the right of a toolbar or toolbar row. Commonly used to hold the main action of a toolbar, such as overflow buttons
md-title Will create the toolbar title. Works inside or outside a toolbar row