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.


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.



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.


As with other Vuetify components, you can control the display state with v-model.