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 i bottom-navigation-vue --save

1. Import and register the component.

import VueBottomNavigation from "bottom-navigation-vue";
// or
export default {
  components: { VueBottomNavigation },

2. Add the VueBottomNavigation component to the template.

  <VueBottomNavigation :options="options" v-model="selected" />

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.