Vue bottom navigation is a Vue 3/2 component for creating a modern, mobile bottom navigation tab bar for web and mobile.
Read More - Responsive Bottom Navigation Bar Using HTML CSS & JavaScript
How to make use of it:
Install and download:
# NPM $ npm i bottom-navigation-vue --save
1. Import and register the component.
import VueBottomNavigation from "bottom-navigation-vue";
Vue.use(VueBottomNavigation);
// or
export default {
components: { VueBottomNavigation },
};2. Add the VueBottomNavigation component to the template.
<template> <VueBottomNavigation :options="options" v-model="selected" /> </template>
3. Add menu items to the bottom navigation bar. In this example, we’re using the Font Awesome font for the menu icons.
export default {
components: { VueBottomNavigation },
data: () => ({
selected: 1,
options: [
{
id: 1,
icon: "fas fa-home",
title: "Home",
badge: 10
},
// ...
],
}),
};4. Component props available.
value: {
default: null,
},
options: {
type: Array,
default: () => [],
},
color: {
type: String,
default: "#42A5F5",
},
badgeColor: {
type: String,
default: "#FBC02D",
},Modern Bottom Navigation Bar In Vue, vue bottom navigation Plugin/Github, bottom navigation bar android 2022, bottom navigation bar android not showing
See Demo And Download
Official Website(imanmalekian31): Click Here
This superior jQuery/javascript plugin is developed by imanmalekian31. For extra Advanced Usage, please go to the official website.
