Bottom navigation

The v-bottom-navigation component is an alternative to the sidebar. It is primarily used for mobile applications and comes in three variants, icons and text, and shift.


While v-bottom navigation is meant to be used with vue-router, you can also programmatically control the active state of the buttons by using the value property. A button is given a default value of its index with v-bottom-navigation.


v-bottom-navigationPrimary Component
v-btnSub-component used for modifying the v-bottom-navigation state




The color prop applies a color to the background of the bottom navigation. We recommend using the light and dark props to properly contrast text color.


Using the grow property forces v-btncomponents to fill all available space. Buttons have a maximum width of 168px per the Bottom Navigation MD specification.


Adjust the style of buttons and icons by using the horizontal prop. This positions button text inline with the provided v-icon.


The shift prop hides button text when not active. This provides an alternative visual style to the v-bottom-navigation component.


Since v-bottom-navigation supports v-model, use the active prop to control the display state.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub