Modern Bottom Navigation Bar In Vue

Description:

A Vue 3/2 component to create a modern animated bottom navigation tab bar for web & mobile.

How to use it:

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. In this example, we use Font Awesome iconic font for the menu icons. The badge option is used to specify the number of unread notifications in the badge.

export default {
  components: { VueBottomNavigation },
  data: () => ({
    selected: 1,
    options: [
      { 
        id: 1, 
        icon: "fas fa-home", 
        title: "Home", 
        badge: 10 
      },
      // ...
    ],
  }),
};

4. Available component props.

value: {
  default: null,
},
options: {
  type: Array,
  default: () => [],
},
color: {
  type: String,
  default: "#42A5F5",
},
badgeColor: {
  type: String,
  default: "#FBC02D",
},

Preview:

Modern Bottom Navigation Bar In Vue

Changelog:

v1.3.2 (10/28/2021)

  • Update package

v1.3.1 (10/18/2021)

  • Add dist file

v1.3.0 (10/18/2021)

  • Add vue router

v1.2.0 (10/14/2021)

  • refactor(slot): Add child icon and title slot

v1.1.2 (10/04/2021)

  • Fix update options at runtime.

v1.1.1 (09/11/2021)

  • Support Vue 3

v1.1.0 (09/11/2021)

  • refactor(title): Change title color and refactor positions

v1.0.0 (09/09/2021)

  • Fix default null value
  • Add child items

v0.1.5 (08/23/2021)

  • Fix remove previous styles on resize

Download Details:

Author: imanmalekian31

Live Demo: https://vue-bottom-navigation.herokuapp.com/

Download Link: https://github.com/imanmalekian31/vue-bottom-navigation/archive/refs/heads/master.zip

Official Website: https://github.com/imanmalekian31/vue-bottom-navigation

Install & Download:

# NPM
$ npm i bottom-navigation-vue --save

You Might Be Interested In:

Tags:

Add Comment