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

# API

# 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

When a v-btn with the icon prop is 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.

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