Toolbar

QToolbar is a component usually part of Layout Header and Footer, but it can be used anywhere on the page.

Installation


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QToolbar',
      'QToolbarTitle'
    ]
  }
}

Usage

Basic



With Avatar



You can use the glossy class to make the toolbar glossy.

Glossy



Grouped vertically



Grouped horizontally



With Tabs



With Button Dropdown



With Button Toggle



QToolbar API

QToolbarTitle API