# Bottom navigation

The v-bottom-navigation component is an alternative to the sidebar. It is primarily used for mobile applications and comes in three variants, icons and text, and shift.

# Usage

While the bottom nav is meant to be used with the vue-router, you can also programmatically control the active state of the buttons by using the active prop with the sync modifier—e.g. active.sync. Modify the value property to designate the synced value. A button is given a default value of its index with v-bottom-navigation.


# Examples

# Props

# Color

The color prop applies a color to the background the bottom navigation. We recommend using the light and dark props to properly contrast text color.

# Grow

Using the grow property forces v-btn components to fill all available space. Buttons have a maximum width of 168px per the Bottom Navigation MD specification.

# Hide on scroll

The v-bottom-navigation component hides when scrolling up when using the hide-on-scroll property. This is similar to the scrolling techniques that are supported in v-app-bar. In the following example, scroll up and down to see this behavior.

# Horizontal

Adjust the style of buttons and icons by using the horizontal prop. This positions button text inline with the provided v-icon.

# Scroll threshold

Modify the scroll-threshold property to increase the distance a user must scroll before the v-bottom-navigation is hidden.

# Shift

The shift prop hides button text when not active. This provides an alternative visual style to the v-bottom-navigation component.

# Toggle

The display state of v-bottom-navigation can be toggled using the input-value prop. You can also control the currently active button using v-model.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:10/21/2020, 1:20:05 AM