Press "Enter" to skip to content

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.

modern bottom navigation bar android, custom bottom navigation bar android github custom bottom navigation bar android example, bottom navigation bar design flutter, bottom navigation bar flutter

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *