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.
When <v-btn>s with the icon prop are used inside of v-toolbar and v-app-bar they will automatically have their size increased and negative margin applied to ensure proper spacing according to the Material Design Specification. If you choose to wrap your buttons in any container, such as a <div>, you will need to apply negative margin to that container in order to properly align them.
v-app-bar-nav-icon: A styled icon button component created specifically for use with v-toolbar andv-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. Thedefaultslot 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.
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.