Bottom nav

The v-bottom-nav 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

v-bottom-nav
Name
absolute
Default
false
Type
boolean

Position the element absolutely

Name
active.sync
Default
undefined
Type
number | string

Holds the value of the currently active button. If the button has no value supplied, its index will be used instead. This prop supports the .sync modifier.

Name
app
Default
false
Type
boolean

Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside outside of v-content to function properly

Name
color
Default
undefined
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
fixed
Default
false
Type
boolean

Position the element fixed

Name
height
Default
56
Type
number | string

Sets the component height

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
mandatory
Default
false
Type
boolean

Forces a value to always be selected

Name
shift
Default
false
Type
boolean

Hide text of button when not active

Name
value
Default
undefined
Type
any

Controls visibility

Examples

Color & shift

When using a colored background, it is recommended to use the light prop. The shift prop will hide the button text until active. Keep in mind, 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.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore