VBottomNavigation
The VBottomNavigation component is a material design bottom navigation bar that provides quick navigation between top-level views in an app. It’s commonly used on mobile devices as an alternative to tabs or drawer navigation.
<template>
<v-bottom-navigation v-model="value">
<v-btn value="recent">
<v-icon>mdi-history</v-icon>
<span>Recent</span>
</v-btn>
<v-btn value="favorites">
<v-icon>mdi-heart</v-icon>
<span>Favorites</span>
</v-btn>
<v-btn value="nearby">
<v-icon>mdi-map-marker</v-icon>
<span>Nearby</span>
</v-btn>
</v-bottom-navigation>
</template>
<script setup>
import { ref } from 'vue'
const value = ref('recent')
</script>
The selected value. Used with v-model.<v-bottom-navigation v-model="selectedTab">
<!-- Buttons -->
</v-bottom-navigation>
Controls whether the bottom navigation is active and visible in the layout.<v-bottom-navigation :active="showNavigation">
<!-- Buttons -->
</v-bottom-navigation>
Applies specified color to the background.<v-bottom-navigation bg-color="primary">
<!-- Buttons -->
</v-bottom-navigation>
Applies specified color to selected button.<v-bottom-navigation color="accent">
<!-- Buttons -->
</v-bottom-navigation>
Sets the color of component when not selected.
Forces buttons to take up all available space.<v-bottom-navigation grow>
<!-- Buttons expand to fill space -->
</v-bottom-navigation>
Changes the display mode of the navigation buttons.<!-- Shift mode hides text on inactive buttons -->
<v-bottom-navigation mode="shift">
<!-- Buttons -->
</v-bottom-navigation>
horizontal - Icons and text are always visibleshift - Only active button shows text, inactive buttons show only icons
height
number | string
default:"56"
Sets the height of the bottom navigation in pixels.<v-bottom-navigation :height="64">
<!-- Buttons -->
</v-bottom-navigation>
density
'default' | 'comfortable' | 'compact'
default:"'default'"
Adjusts the vertical spacing within the component.
Sets the elevation (box-shadow) of the component.<v-bottom-navigation elevation="8">
<!-- Buttons -->
</v-bottom-navigation>
rounded
boolean | string | number
Applies border radius to the component.
border
boolean | string | number
Applies a border to the component.
Specifies the custom tag to use for the root element.
name
string
default:"'bottom-navigation'"
Assigns a specific name for layout registration.
order
number | string
default:"0"
Adjusts the order of the component in the layout system.
Applies position: absolute to the component.
Forces at least one item to always be selected (inherited from group).
Sets the maximum number of selections that can be made (inherited from group).
Allows multiple selections (inherited from group).
selectedClass
string
default:"'v-btn--selected'"
The class applied to selected buttons.
Emitted when the selected value changes.<v-bottom-navigation @update:modelValue="onSelectionChange">
<!-- Buttons -->
</v-bottom-navigation>
Emitted when the active state changes.
The default slot for navigation buttons (typically VBtn components).
Examples
Basic Navigation
<template>
<v-bottom-navigation v-model="value" color="primary">
<v-btn value="home">
<v-icon>mdi-home</v-icon>
Home
</v-btn>
<v-btn value="search">
<v-icon>mdi-magnify</v-icon>
Search
</v-btn>
<v-btn value="profile">
<v-icon>mdi-account</v-icon>
Profile
</v-btn>
</v-bottom-navigation>
</template>
<script setup>
import { ref } from 'vue'
const value = ref('home')
</script>
Shift Mode
<template>
<v-bottom-navigation v-model="value" mode="shift" color="accent">
<v-btn value="videos">
<v-icon>mdi-television-play</v-icon>
Videos
</v-btn>
<v-btn value="music">
<v-icon>mdi-music</v-icon>
Music
</v-btn>
<v-btn value="books">
<v-icon>mdi-book</v-icon>
Books
</v-btn>
<v-btn value="photos">
<v-icon>mdi-image</v-icon>
Photos
</v-btn>
</v-bottom-navigation>
</template>
<script setup>
import { ref } from 'vue'
const value = ref('videos')
</script>
In shift mode, only the selected button displays text. This allows for more buttons in the navigation while maintaining a clean interface.
Grow Mode
<template>
<v-bottom-navigation v-model="value" grow bg-color="teal">
<v-btn value="recent">
<v-icon>mdi-history</v-icon>
Recent
</v-btn>
<v-btn value="favorites">
<v-icon>mdi-heart</v-icon>
Favorites
</v-btn>
<v-btn value="nearby">
<v-icon>mdi-map-marker</v-icon>
Nearby
</v-btn>
</v-bottom-navigation>
</template>
<script setup>
import { ref } from 'vue'
const value = ref('recent')
</script>
With Custom Colors
<template>
<v-bottom-navigation
v-model="value"
bg-color="indigo-darken-3"
color="indigo-lighten-1"
base-color="grey"
>
<v-btn value="home">
<v-icon>mdi-home</v-icon>
Home
</v-btn>
<v-btn value="explore">
<v-icon>mdi-compass</v-icon>
Explore
</v-btn>
<v-btn value="settings">
<v-icon>mdi-cog</v-icon>
Settings
</v-btn>
</v-bottom-navigation>
</template>
<script setup>
import { ref } from 'vue'
const value = ref('home')
</script>
VBottomNavigation automatically integrates with VApp’s layout system. The content area adjusts when the bottom navigation is active.
Best Practices
- Use 3-5 navigation items for optimal usability
- Each button should represent a distinct section of your app
- Icons should be easily recognizable and consistent
- Consider using shift mode when you have 4-5 items to save space
- Use grow mode when you have exactly 3 items for balanced appearance