:::demo
```html
      <p class="caption">
        Toolbars are mainly used in Layout headers and footers, but they can be used in your Page view too.
      </p>

      <q-toolbar>
        <q-btn flat round dense icon="menu"></q-btn>
        <q-toolbar-title>
          Toolbar
        </q-toolbar-title>
        <q-btn flat round dense icon="more_vert"></q-btn>
      </q-toolbar>

      <br>

      <q-toolbar inverted>
        <q-btn flat round dense icon="menu"></q-btn>
        <q-toolbar-title>
          Toolbar
        </q-toolbar-title>
        <q-btn flat round dense icon="more_vert"></q-btn>
      </q-toolbar>

      <p class="caption">
        They come in all colors.
      </p>

      <q-toolbar color="secondary">
        <q-btn flat round dense icon="assignment_ind"></q-btn>
        <q-toolbar-title>
          Toolbar
        </q-toolbar-title>
        <q-btn flat round dense icon="sim_card"></q-btn>
        <q-btn flat round dense icon="gamepad"></q-btn>
      </q-toolbar>
      <q-toolbar color="yellow" text-color="dark">
        <q-btn flat round dense icon="assignment_ind"></q-btn>
        <q-toolbar-title>
          Toolbar
          <span slot="subtitle">Subtitle</span>
        </q-toolbar-title>
        <q-btn flat round dense icon="sim_card"></q-btn>
        <q-btn flat round dense icon="gamepad"></q-btn>
      </q-toolbar>
      <q-toolbar color="orange">
        <q-btn flat round dense icon="mail">
          <q-chip floating color="red">2</q-chip>
        </q-btn>
        <q-toolbar-title>
          Long title for Toolbar. Very very very very very very long title.
        </q-toolbar-title>
        <q-btn flat round dense icon="alarm"></q-btn>
        <q-btn flat round dense icon="router"></q-btn>
        <q-btn flat round dense icon="keyboard"></q-btn>
      </q-toolbar>
      <q-toolbar color="dark">
        <q-btn flat round dense icon="menu"></q-btn>
        <q-btn flat round dense icon="security"></q-btn>
        <q-toolbar-title>
          Toolbar
        </q-toolbar-title>
        <q-btn flat round dense icon="headset"></q-btn>
        <q-btn flat round dense icon="tv"></q-btn>
      </q-toolbar>

      <p class="caption">
        And inverted:
      </p>

      <q-toolbar inverted color="secondary">
        <q-btn flat round dense icon="assignment_ind"></q-btn>
        <q-toolbar-title>
          Toolbar
        </q-toolbar-title>
        <q-btn flat round dense icon="sim_card"></q-btn>
        <q-btn flat round dense icon="gamepad"></q-btn>
      </q-toolbar>
      <q-toolbar inverted color="purple">
        <q-btn flat round dense icon="assignment_ind"></q-btn>
        <q-toolbar-title>
          Toolbar
          <span slot="subtitle">Subtitle</span>
        </q-toolbar-title>
        <q-btn flat round dense icon="sim_card"></q-btn>
        <q-btn flat round dense icon="gamepad"></q-btn>
      </q-toolbar>
      <q-toolbar inverted color="orange">
        <q-btn flat round dense icon="mail"></q-btn>
        <q-toolbar-title>
          Long title for Toolbar. Very very very very very very long title.
        </q-toolbar-title>
        <q-btn flat round dense icon="alarm"></q-btn>
        <q-btn flat round dense icon="router"></q-btn>
        <q-btn flat round dense icon="keyboard"></q-btn>
      </q-toolbar>
      <q-toolbar inverted color="dark">
        <q-btn flat round dense icon="menu"></q-btn>
        <q-btn flat round dense icon="security"></q-btn>
        <q-toolbar-title>
          Toolbar
        </q-toolbar-title>
        <q-btn flat round dense icon="headset"></q-btn>
        <q-btn flat round dense icon="tv"></q-btn>
      </q-toolbar>
```
:::
