# 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.


# Sub-components

# 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. This is a functional component.

# v-app-bar-title

A modified v-toolbar-title specifically for use with the shrink-on-scroll prop. v-toolbar-title will be truncated on small screens (see issue #12514) but this component uses absolute positioning to be fully visible when expanded. We don’t recommend using v-app-bar-title without shrink-on-scroll as it does add a resize watcher and some extra calculations.

# Caveats

# Examples

# Props

# Collapsible bars

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

# Dense

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

# Elevate 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.

# Fade image on scroll

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

# Hiding on scroll

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

# 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.

# 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.

# 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.

# 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.

# Misc

# Toggle navigation drawers

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

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 on GitHub
Last updated:01/20/2021, 1:10:30 AM