Skip to page content

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.

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

With other components

QMenu



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.

Accessibility
v2.25+

Like QToolbar, QBar carries role="toolbar" and nothing more — give it an aria-label when the page contains several toolbars, and keep in mind that any controls inside are independent Tab stops. See QToolbar’s Accessibility section for details.