Upgrade toQuasar v2and use Vue.js 3

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.




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


With other components

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.