This is the Vuetify 3 documentation, examples and information may be broken or outdated.

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.

Usage

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

Anatomy

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

API

ComponentDescription
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

Examples

Props

Density

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

v-app-bar/prop-density.vue

Images

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.

v-app-bar/prop-image.vue

Prominent

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.

v-app-bar/prop-prominent.vue

Ready for more?

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