Why donate
API Explorer

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.

Loading QBar API...



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


MacOS style

Windows style

iOS style

Android style

With other components



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.