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:
The bottom bar is compatible with all Vue Router options. Just pass the values as parameters on md-bottom-bar-item component:
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:
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:
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:
<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.All the following options can be used on any bottom bar:
| Name | Description | Default |
|---|---|---|
| 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 |
The following options can be used on any bottom bar item. All options of router-link can be simply used here:
| Name | Description | Default |
|---|---|---|
| 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 |