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 v-bottom navigation is meant to be used with vue-router, you can also programmatically control the active state of the buttons by using the value property. A button is given a default value of its index with v-bottom-navigation.

API

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.