#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.
#Usage
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.
#API
| Component | Description |
|---|---|
| v-bottom-navigation | Primary Component |
| v-btn | Sub-component used for modifying the v-bottom-navigation state |
For styles to apply properly when using the shift prop, v-btn text is required to be wrapped in a span tag.
#Examples
#Props
#Color
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.
#Grow
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.
#Horizontal
Adjust the style of buttons and icons by using the horizontal prop. This positions button text inline with the provided v-icon.
#Shift
The shift prop hides button text when not active. This provides an alternative visual style to the v-bottom-navigation component.
For this to work, v-btn text is required to be wrapped in a span tag.
#Toggle
Since v-bottom-navigation supports v-model, use the active prop to control the display state.