Skip to main content

​
VAppBar

The VAppBar component is a primary navigation toolbar that appears at the top or bottom of your application. It supports scroll behaviors, collapsing, elevation changes, and extends the VToolbar component.

​
Usage

<template>
  <v-app>
    <v-app-bar>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-toolbar-title>Application</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
    </v-app-bar>
    
    <v-main>
      <!-- Content -->
    </v-main>
  </v-app>
</template>

​
Basic Example

<template>
  <v-app-bar color="primary">
    <v-toolbar-title>My App</v-toolbar-title>
  </v-app-bar>
</template>

​
Props

​
modelValue
boolean
default:"true"
Controls the visibility of the app bar.
<v-app-bar v-model="showAppBar">
  <!-- Content -->
</v-app-bar>
​
scrollBehavior
string
Defines how the app bar behaves on scroll. Can be one or more of: hide, fully-hide, inverted, collapse, elevate, fade-image.
<!-- Hide on scroll down, show on scroll up -->
<v-app-bar scroll-behavior="hide">
  <!-- Content -->
</v-app-bar>

<!-- Multiple behaviors -->
<v-app-bar scroll-behavior="hide elevate">
  <!-- Content -->
</v-app-bar>
Available behaviors:
  • hide - Hides when scrolling down, shows when scrolling up
  • fully-hide - Completely hides including extension
  • inverted - Inverts the scroll behavior (hide when scrolling up)
  • collapse - Collapses to title bar only
  • elevate - Adds elevation when scrolled
  • fade-image - Fades background image on scroll
​
location
'top' | 'bottom'
default:"'top'"
Sets the position of the app bar.
<v-app-bar location="bottom">
  <!-- Content -->
</v-app-bar>
​
height
number | string
default:"64"
Sets the height of the app bar in pixels.
<v-app-bar :height="80">
  <!-- Content -->
</v-app-bar>
​
color
string
Applies specified color to the app bar.
<v-app-bar color="primary">
  <!-- Content -->
</v-app-bar>
​
collapse
boolean
default:"false"
Puts the app bar into a collapsed state.
​
flat
boolean
default:"false"
Removes the app bar’s box-shadow.
​
floating
boolean
default:"false"
Applies a floating style to the app bar.
​
density
'default' | 'comfortable' | 'compact' | 'prominent'
default:"'default'"
Adjusts the vertical spacing of the app bar.
​
absolute
boolean
default:"false"
Applies position: absolute to the app bar.
​
elevation
number | string
Sets the elevation (box-shadow) of the app bar.
​
image
string
Specifies a background image for the app bar.
<v-app-bar image="/path/to/image.jpg">
  <!-- Content -->
</v-app-bar>
​
title
string
Specifies a title text for the toolbar.
​
scrollThreshold
number | string
The amount of scroll distance in pixels before the scroll behavior activates.
​
name
string
Assigns a specific name for layout registration.
​
order
number | string
default:"0"
Adjusts the order in which the app bar appears in the layout.
​
border
boolean | string | number
Applies a border to the app bar.
​
rounded
boolean | string | number
Applies border radius to the app bar.

​
Events

​
update:modelValue
(value: boolean) => void
Emitted when the visibility state changes.
<v-app-bar @update:modelValue="onVisibilityChange">
  <!-- Content -->
</v-app-bar>

​
Slots

VAppBar inherits all slots from VToolbar:
​
default
slot
The default slot for toolbar content.
​
prepend
slot
Slot for content at the start of the toolbar.
​
append
slot
Slot for content at the end of the toolbar.
​
title
slot
Slot for custom title content.
​
image
slot
Slot for custom image content.
​
extension
slot
Slot for extension content below the main toolbar.

​
Scroll Behaviors

​
Hide on Scroll

<v-app-bar scroll-behavior="hide">
  <v-toolbar-title>Hidden on Scroll</v-toolbar-title>
</v-app-bar>
The app bar hides when scrolling down and reappears when scrolling up. The behavior is disabled if there isn’t enough scrollable space on the page.

​
Elevate on Scroll

<v-app-bar scroll-behavior="elevate" flat>
  <v-toolbar-title>Elevates on Scroll</v-toolbar-title>
</v-app-bar>

​
Collapse on Scroll

<v-app-bar scroll-behavior="collapse">
  <v-toolbar-title>Collapses on Scroll</v-toolbar-title>
  <template v-slot:extension>
    <v-tabs>
      <v-tab>Tab 1</v-tab>
      <v-tab>Tab 2</v-tab>
    </v-tabs>
  </template>
</v-app-bar>

​
Combined Behaviors

<v-app-bar scroll-behavior="hide elevate">
  <v-toolbar-title>Multiple Behaviors</v-toolbar-title>
</v-app-bar>

​
Examples

​
With Navigation Icon

<template>
  <v-app-bar color="primary">
    <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
    <v-toolbar-title>Application</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn icon>
      <v-icon>mdi-dots-vertical</v-icon>
    </v-btn>
  </v-app-bar>
</template>

​
With Extension

<template>
  <v-app-bar color="primary">
    <v-toolbar-title>Application</v-toolbar-title>
    
    <template v-slot:extension>
      <v-tabs>
        <v-tab>Tab 1</v-tab>
        <v-tab>Tab 2</v-tab>
        <v-tab>Tab 3</v-tab>
      </v-tabs>
    </template>
  </v-app-bar>
</template>

​
Prominent

<template>
  <v-app-bar density="prominent" color="primary">
    <v-toolbar-title>Prominent App Bar</v-toolbar-title>
  </v-app-bar>
</template>
When using scroll behaviors, ensure your content has sufficient height to trigger scrolling. The scroll behavior may not activate on short pages.

Build docs developers (and LLMs) love

Get started for freeTalk to us