For Enterprise

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.

  • v-app-bar-nav-icon: A styled icon button component created specifically for use with v-toolbar and v-app-bar. Typically seen on the left side of a toolbar as a hamburger menu, it is often used to control the state of a navigation drawer. The default slot can be used to customize the icon and function of this component.

Select your desired component from below and see the available props, slots, events and functions.

Below is a collection of simple to complex examples.

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

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 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 can be hidden on scroll. Use the hide-on-scroll property for this.

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

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.

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.

Using the functional component v-app-bar-nav-icon you can toggle the state of other components such as a v-navigation-drawer.

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

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

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

Ready for more? Continue reading with:

Caught a mistake or want to contribute to the documentation? Edit Layout or Content on GitHub!