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

INFO

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-btn components 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.

INFO

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.