The v-bottom-navigation
is an alternative to the sidebar. It is primarily used on mobile and comes in two variants, icons and text, and shift.
While the bottom nav is meant to be used with the vue-router
, you can also programmatically control the active state of the buttons by using the active.sync
prop. You can change a button's value by using its value
attribute.
Select your desired component from below and see the available props, slots, events and functions.
Applies position: absolute to the component.
The class applied to a v-btn when activated.
Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside outside of v-main
component to function properly. You can more information about layouts on the application page. Note: this prop automatically applies position: fixed to the layout element. You can overwrite this functionality by using the absolute
prop
Changes the background-color for the component.
Applies specified color to the control - it can be the name of material color (for example success
or purple
) or css color (#033
or rgba(255, 0, 0, 0.5)
). You can find list of built in classes on the colors page.
Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.
Applies position: fixed to the component.
Sets the height for the component.
Will transition the navigation off screen when scrolling up.
Controls whether the component is visible or hidden. Supports the .sync modifier.
Applies the light theme variant to the component.
Forces a value to always be selected (if available).
Sets the maximum height for the component.
Sets the maximum width for the component.
Sets the minimum height for the component.
Sets the minimum width for the component.
Designates the element to target for scrolling events. Uses window
by default.
The amount of scroll distance down before hide-on-scroll activates.
Holds the value of the currently active v-btn. If the button has no value supplied, its index will be used instead..
Sets the width for the component.
The default Vue slot.
The value of currently selected button. If no value is assigned, will be the current index of the button.
any
The event used for input-value.sync
.
string | number
map-deep-get($headings, 'caption', 'size') !default;
168px !default;
80px !default;
calc(100% - 22px) !default;
calc(100% - 12px) !default;
Below is a collection of simple to complex examples.
The color
prop applies a color to the background the bottom navigation. It is recommended to use the light
and dark
props to properly contrast text color.
If v-bottom-navigation
has grow
property, buttons within it grow to fill available space.
The horizontal
prop, places nav text next to the icon as appose to beneath it.
The shift
prop will hide the button text until active. For this to work, v-btn
text is required to be wrapped in a <span>
tag.
The display state of v-bottom-navigation
can be toggled using the input-value
prop. You can also control the currently active button using v-model
.
Hide-on-scroll hides v-bottom-navigation
when target element is scrolled.
scroll-threshold
property allows you to customize the threshold you can scroll before v-bottom-navigation
disappears.