Modern Bottom Navigation Bar In Vue

Install & Download:

# Vue 3
$ npm i bottom-navigation-vue --save
# Vue 2
$ npm i [email protected] --save

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: () => [],
},
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.6 (05/17/2023)

  • Update

v3.3.2 (03/18/2023)

  • Added new type (Hill)

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
Tags:

Add Comment