Modern Bottom Navigation Bar In Vue

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: () => [],
},
foregroundColor: {
  type: String,
  default: "#42A5F5",
},
backgroundColor: {
  type: String,
  default: "#FFFFFF",
},
iconColor: {
  type: String,
  default: "#0000008A",
},
badgeColor: {
  type: String,
  default: "#FBC02D",
},
replaceRoute: {
  type: Boolean,
  default: false,
},

Preview:

Modern Bottom Navigation Bar In Vue

Changelog:

v3.3.0 (12/02/2022)

  • Add watching route to update active bottom

v3.2.0 (11/13/2022)

  • Add bottom navigation types for typescript lovers

v3.1.0 (11/04/2022)

  • Has used <script setup> and improved the build config.

v3.0.0 (06/10/2022)

  • Updated for Vue 3

v2.5.2 (06/04/2022)

  • Fix installing globally

v2.5.0 (04/26/2022)

  • Fix supporting vue 3.

v2.3.4 (04/22/2022)

  • Fix update values

v2.3.1 (04/15/2022)

  • feat(windows-navigation): Add windows bottom navigation

v2.2.1 (04/08/2022)

  • refactor

v2.2.0 (03/28/2022)

  • Add ring button

v2.0.1 (03/26/2022)

  • Add swipe navigation

v2.0.0 (03/25/2022)

  • At this version, we are going to have many bottom navigation with different styles

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:

# Vue 3
$ npm i bottom-navigation-vue --save

# Vue 2
$ npm i [email protected] --save
Tags:

Add Comment