Bar

The QBar is a small component for creating the top bar on different types of mobile or desktop websites/apps. For instance, in desktop apps QBar will have things like the close, minimize or maximize buttons and other menu controls for your application.

QBar is especially useful for frame-less Electron apps where you integrate it in the QHeader.

Installation


// quasar.conf.js

return {
  framework: {
    components: [
      'QBar'
    ]
  }
}

Usage

TIP

For responsiveness, use Visibility Quasar CSS Classes. For finer tuning you can go write your own CSS media breakpoints or even go with QResizeObserver.

Styling

MacOS style



Windows style



iOS style



Android style



With other components

QMenu



QDialog



QHeader with QToolbar



Frameless Electron Window

QBar component can come in really handy when developing Electron apps, especially if you choose to use a frameless window.

Read more on Frameless Electron Window page.

QBar API