The v-bottom-navigation is an alternative to the sidebar. It is primarily used on mobile and comes in two 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.sync prop. You can change a button's value by using its value attribute.

API

Examples

Color

The color prop applys a color to the background the bottom navigation. It is recommended to use the light and dark props to properly contrast text color.

Grow

If v-bottom-navigation has grow property, buttons within it grow to fill available space.

Horizontal

The horizontal prop, places nav text next to the icon as appose to beneath it.

Shift

The shift prop will hide the button text until active. For this to work, v-btn text is required to be wrapped in a <span> tag.

Toggle

As with other Vuetify components, you can control the display state with v-model.

Hide on scroll

Hide-on-scroll hides v-bottom-navigation when target element is scrolled.

Scroll threshold

scroll-threshold property allows you to customize the threshold you can scroll before v-bottom-navigation disappears.

Edit this page | language on Github
Vuetify
StoreFor Enterprise