App bars

The v-app-bar component is pivotal to any graphical user interface (GUI), as it generally is the primary source of site navigation. The app-bar component works great in conjunction with a v-navigation-drawer for providing site navigation in your application.


The v-app-bar component is used for application-wide actions and information.


The recommended placement of elements inside of v-app-bar is:

  • Place v-app-bar-nav-icon or other navigation items on the far left
  • Place v-app-bar-title to the right of navigation
  • Place contextual actions to the right of navigation
  • Place overflow actions to the far right

Element / AreaDescription
1. ContainerThe App Bar container holds all v-app-bar components
2. App Bar Icon (optional)A styled icon button component created that is often used to control the state of a v-navigation drawer
3. Title (optional)A heading with increased font-size
4. Action items (optional)Used to highlight certain actions not in the overflow menu
5. Overflow menu (optional)Place less often used action items into a hidden menu


v-app-barPrimary Component
v-app-bar-nav-iconA customized v-btn component that uses a default icon value of $menu
v-app-bar-titleAn extension of v-toolbar-title that is used for scrolling techniques




You can make app-bar dense. A dense app bar has lower height than regular one.



v-app-bar can contain background images. You can set source via the src prop. If you need to customize the v-img properties, the app-bar provides you with an img slot.



An v-app-bar with the prominent prop can opt to have its height shrunk as the user scrolls down. This provides a smooth transition to taking up less visual space when the user is scrolling through content. Shrink height has 2 possible options, dense (48px) and short (56px) sizes.


Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub