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.

API

Examples

Dense

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

Prominent w/ scroll shrink

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.

Prominent w/ scroll shrink and image

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.

Hiding on scroll

v-app-bar can be hidden on scroll. Use the hide-on-scroll property for this.

Collapsible bars

With the collapse and collapse-on-scroll props you can easily control the state of toolbar that the user interacts with.

Elevate bar on scroll

When using the elevate-on-scroll prop, the v-app-bar will rest at an elevation of 0dp until the user begins to scroll down. Once scrolling, the bar raises to 4dp.

Inverted scrolling

When using the inverted-scroll property, the bar will hide until the user scrolls past the designated threshold. Once past the threshold, the v-app-bar will continue to display until the users scrolls up past the threshold. If no scroll-threshold value is supplied a default value of 0 will be used.

Scroll threshold

v-app-bar can have scroll threshold. It will start reacting to scroll only after defined via scroll-threshold property amount of pixels.

Prominent w/ scroll shrink and image, fading on scroll

The background image of a v-app-bar can fade on scroll. Use the fade-img-on-scroll property for this.

With menu

You can easily extend the functionality of app bar by adding VMenu there. Click on last icon to see it in action.

Edit this page on Github | Translate on Crowdin
Vuetify
StoreFor Enterprise