# App bars
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.
v-app-bar component is used for application-wide actions and information.
A modified v-toolbar-title specifically for use with the
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
shrink-on-scroll as it does add a resize watcher and some extra calculations.
v-btn with the
icon prop is used inside of
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.
You can make app-bar dense. A dense app bar has lower height than regular one.
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 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.