Vue Bottom Navigation
Guide
Demo
GitHub (opens new window)

# Grow bottom navigation

WARNING

You are reading the documentation for Vue 3!

  • Vue 2 documentation has been moved to this link.

# Installation 

# npm
$ npm install bottom-navigation-vue
#yarn
$ yarn add bottom-navigation-vue

import { createApp } from "vue";
import bottomNavigationVue from "bottom-navigation-vue";
import "bottom-navigation-vue/dist/style.css";

const app = createApp(App)
app.use(bottomNavigationVue);

# Usage






 
 


 












<template>
  <GrowBottomNavigation :options="options" v-model="selected" />
</template>

<script>
  import { GrowBottomNavigation } from "bottom-navigation-vue";
  import "bottom-navigation-vue/dist/style.css";

  export default {
    components: { GrowBottomNavigation },
    data: () => ({
    selected: 1,
    options: [
      { id: 1, icon: 'fa-solid fa-home', title: 'Home', color: '#5639af' },
      { id: 2, icon: 'fa-solid fa-magnifying-glass', title: 'Search', color: '#ac4793' },
      { id: 3, icon: 'fa-solid fa-heart', title: 'Likes', color: '#e2a93a' },
      { id: 4, icon: 'fa-solid fa-gear', title: 'Settings', color: '#4493a7' }
    ]
    }),
  };
</script>

WARNING

If you registered the component globally, you don't need to import it in the above example.

# Constructor Options

Key Type Description Default
value String, Number selected button null
options Array list of buttons required
color String If you don't mention color for each button, It will set it for your button color as a default color. #5CA39B
replaceRoute Boolean default routes are pushed but with this option you can change it to replace false

Your options need id and icon, which icon is fontawesome (opens new window) class but you can customize it with icon slot. Additionally, you can add title for buttons.

For v-model to work, it expects id that defined on options object (default is value) and also emit an event (default is update).

# Route

For change route you can add path field to your option items like below :
Note : your path field must be an Object (For more information read vue router (opens new window) guides).






 



[
  {
    id: 1,
    icon: "fas fa-wallet",
    title: "Wallet",
    path: { name: "bookmarks", query: { bookmark: "important" } },
  },
];

# Slots

Key Description Scoped
icon main button icons yes
title main button titles yes

You can use Icon Slot and Title Slot to customize your icon and title like below.



 
 



<template>
  <GrowBottomNavigation :options="options" v-model="selected">
    <template #icon="{ props }"> <v-icon>{{ props.icon }}</v-icon> </template>
    <template #title="{ props }"> <b>{{ props.title }}</b> </template>
  </GrowBottomNavigation>
</template>

← Swipe bottom navigation →