packages/docs/src/pages/en/components/bottom-navigation.md
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.
| Component | Description |
|---|---|
| v-bottom-navigation | Primary Component |
| v-btn | Sub-component used for modifying the v-bottom-navigation state |
::: info
For styles to apply properly when using the shift prop, v-btn text is required to be wrapped in a span tag.
:::
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.
<ExamplesExample file="v-bottom-navigation/prop-color" />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.
<ExamplesExample file="v-bottom-navigation/prop-grow" /> <!-- TODO: Fix this example when scrolling techniques is implemented #### Hide on scroll The `v-bottom-navigation` component hides when *scrolling up* when using the **hide-on-scroll** property. This is similar to the [scrolling techniques](https://material.io/archive/guidelines/patterns/scrolling-techniques.html) that are supported in [v-app-bar](/components/app-bars/). In the following example, scroll *up and down* to see this behavior. <ExamplesExample file="v-bottom-navigation/prop-hide-on-scroll" /> -->Adjust the style of buttons and icons by using the horizontal prop. This positions button text inline with the provided v-icon.
<ExamplesExample file="v-bottom-navigation/prop-horizontal" /> <!-- TODO: Fix this example when scrolling techniques is implemented #### Scroll threshold Modify the **scroll-threshold** property to increase the distance a user must scroll before the `v-bottom-navigation` is hidden. <ExamplesExample file="v-bottom-navigation/prop-scroll-threshold" /> -->The shift prop hides button text when not active. This provides an alternative visual style to the v-bottom-navigation component.
::: info
For this to work, v-btn text is required to be wrapped in a span tag.
:::
Since v-bottom-navigation supports v-model, use the active prop to control the display state.