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.
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.
Adjust the style of buttons and icons by using the horizontal prop. This positions button text inline with the provided v-icon.
Modify the scroll-threshold property to increase the distance a user must scroll before the
v-bottom-navigation is hidden.
The shift prop hides button text when not active. This provides an alternative visual style to the
For this to work,
v-btn text is required to be wrapped in a
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.