Bottom navigation
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.

Examples

#1 Icons and text
edit
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 a v-model.

#2 Color & shift
edit
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.

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

API

chevron_leftchevron_right