Vue Material -

Bottom Bar

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. The bottom bar component is a high-level navigation system made for mobile devices with Vue Router support. Check it out:

Seamless integration with Vue Router

The bottom bar is compatible with all Vue Router options. Just pass the values as parameters on md-bottom-bar-item component:

With default fixed style
Note: Try tro change the url manually to see the component selecting the correct item.

Shift effect

You can also use the awesome shift effect on your bars. It is great to keep the focus of the active item and you can show up to 6 items at once:

With Primary and Accent colors

Dynamic Themes

Sometimes each part of your application have it's own color theme, like in a social media app. You can change the theme dynamically to morph states creating an immersive experience:

Morphing States

Custom Template

Maybe you want to show more informations inside a bottom bar item. With a simple and flexible default slot, you can make anything you want. Look at this unread notification example:

If you pass anything inside the <md-bottom-bar-item>, the component will ignore the md-label and md-icon. Only use the content slot if you want to create a custom template.
Template Slot

API - md-bottom-bar

All the following options can be used on any bottom bar:

NameDescriptionDefault
md-type String Sets the display mode. See below the detailed description of each type. fixed
md-type="fixed" String Makes the bar with fixed items. Good for a small amount of items. -
md-mode="shift" String Highlights the selected item and hide the label from the others. Good for a large amount of items. Up to 6. -
md-active-item Boolean Dynamically changes the selected item. Works passing the ID of a bottom bar item. null
md-sync-route Boolean Watches the current route if there is a Vue Router instance running on the page. This will automatically change the selected element based on the current URL. false

API - md-bottom-bar-item

The following options can be used on any bottom bar item. All options of router-link can be simply used here:

NameDescriptionDefault
id String The item id. Used when changing the selected item dynamically a random string
md-label String The bottom bar label. Required. null
md-icon String The bottom bar icon. Can be an icon name from Material icons or the path of a valid svg. Required. null
md-disabled Boolean Disable the bottom bar preventing the click on it and all actions. false