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

ComponentDescription
v-bottom-navigationPrimary Component
v-btnSub-component used for modifying the v-bottom-navigation state

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.

Toggle

Since v-bottom-navigation supports v-model, use the active prop to control the display state.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub