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