Bottom Navigation
The BottomNavigation component is an alternative to the sidebar. It is primarily used for mobile applications and comes in three variants, icons and text, and shift.
info
For more details about Vuetify’s usage of BottomNavigation component, click BottomNavigation page.
For more prop explanations, click Vuetify BottomNavigation API page.
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| class | Sets class of active button. | string | undefined |
| dark | Applies dark theme. | boolean | false |
| fixed | Applies position:fixed. | boolean | false |
| grow | Force Buttons to take up all available space. | boolean | false |
| hideOnScrool | Will transition the navigation off screen when scrolling up. | boolean | false |
| horizontal | Uses an alternative horizontal styling for Button. | boolean | false |
| mandatory | Forces a value to always be selected . | boolean | false |
| scrollTarget | Designates the element to target for scrolling events. Uses window by default. | string | undefined |
| scrollTreshold | The amount of scroll distance down before hide-on-scroll activates. | string-number | undefined |
| shift | Hides text of Buttons when they are not active. | boolean | false |
| value | Sets the active button. | number | undefined |
| visible | Visibility of BottomNavigation component. | boolean | true |