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

Usage example coming soon...


# 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

# Density

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

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

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

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