assignment_late
Why donate
travel_explore
API Explorer
widgets
Vue Components
Ajax Bar
Avatar
Badge
Banner
Bar
Breadcrumbs
Card
Carousel
Chat Message
Chip
Circular Progress
Color Picker
Dialog
Editor - WYSIWYG
Expansion Item
Floating Action Button
Icon
Img
Infinite Scroll
Inner Loading
Intersection
Knob
Linear Progress
List & List Items
Markup Table
Menu
No SSR
Pagination
Parallax
Popup Edit
Popup Proxy
Pull to refresh
Rating
Responsive
Scroll Area
Separator
Skeleton
Slide Item
Slide Transition
Space
Spinners
Splitter
Stepper
Table
Tabs
Tab Panels
Timeline
Toolbar
Tooltip
Tree
Uploader
Video
Virtual Scroll
security
Security
build
Quasar CLI (with Vite)
Upgrade guide
NEW!
The quasar.config file
Convert project to CLI with Vite
Browser Compatibility
Supporting TypeScript
Directory Structure
Commands List
CSS Preprocessors
Routing
Lazy Loading - Code Splitting
Handling Assets
Boot Files
Prefetch Feature
API Proxying
Handling Vite
Handling process.env
State Management with Pinia
State Management with Vuex
Linter
Testing & Auditing
Developing Mobile Apps
Ajax Requests
Opening Dev Server To Public
build
Quasar CLI (with Webpack)
Upgrade guide
NEW!
The quasar.config file
Convert to CLI with Webpack
Browser Compatibility
Supporting TypeScript
Directory Structure
Commands List
CSS Preprocessors
Routing
Lazy Loading - Code Splitting
Handling Assets
Boot Files
Prefetch Feature
API Proxying
Handling Webpack
Handling process.env
State Management with Pinia
State Management with Vuex
Linter
Testing & Auditing
SSR mode
Developing Mobile Apps
Ajax Requests
Opening Dev Server To Public
note_add
App Extensions
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...
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.
Ready for more?
Caught a mistake?Edit this page in browser
1. Introduction
2. QBar API
3. Usage
3.1. Styling
3.2. With other components
3.3. Frameless Electron Window
Copyright © 2015-present PULSARDEV SRL, Razvan Stoenescu
This website has been designed in collaboration with Dreamonkey Srl