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
Position the element absolutely
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.
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
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))
Applies the dark theme variant
Position the element fixed
Sets the component height
Applies the light theme variant
Forces a value to always be selected
Hide text of button when not active
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.