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.
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.
Position the element absolutely
CSS Class to apply when active
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))
rgba(255, 0, 0, 0.5)
Applies the dark theme variant
Position the element fixed
Force v-btns to take up all available space
Sets the component height
Will transition the navigation off screen when scrolling up
Uses an alternative horizontal styling for v-btn
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.
Applies the light theme variant
Forces a value to always be selected
Sets the maximum height for the content
Sets the maximum width for the content
Sets the minimum height for the content
Sets the minimum width for the content
Assigns the scroll target
The amount of scroll distance down before hide-on-scroll activates.
Hide text of button when not active
The width of the content
Default Vue slot
The updated bound model
The event used for input-value.sync
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.
As with other Vuetify components, you can control the display state with v-model.