Custom Vue Bottom Navigation Bar Android Github Plugin

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.

Share