Quasar Toolbars are non-wrappable DOM elements which usually contain buttons and text.
A Quasar Layout can have headers and/or footers (also called “marginals”), which will always be visible to the user at all times as long as the Layout is being used. This is a great place to use Toolbars, but you can also place Toolbars anywhere else you want.
Standalone example (within a page template, not on a Layout):
Example on using a Toolbar on Layout header:
As you’ve seen in the examples above, there’s the
<q-toolbar-title> component which wraps the title/text of a Toolbar.
In order to successfully place it in the horizontal middle of your Toolbar on iOS theme (which is specific for iOS Apps), then you need to specify the maximum number of buttons on the left or right side of the title through the
Use one of the Quasar colors from the Color Palette, like
teal as CSS class:
You can also invert the colors (see demo for example) by adding the color and
inverted as CSS classes: