Vue Bottom Navigation
Guide
Demo
GitHub (opens new window)

# Curved 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>
  <CurvedBottomNavigation :options="options" v-model="selected" />
</template>

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

  export default {
    components: { CurvedBottomNavigation },
    data: () => ({
      selected: 1,
      options: [
        {
          id: 1,
          icon: "fas fa-home",
          title: "Home",
          childs: [{ id: 101, icon: "fas fa-gifts", title: "Gifts", badge: 7 }],
        },
        { id: 2, icon: "fas fa-wallet", title: "Wallet" },
        {
          id: 3,
          icon: "fas fa-plus",
          title: "Setting",
          childs: [{ id: 301, icon: "fas fa-ticket-alt", title: "Tickets" }],
        },
        { id: 4, icon: "fas fa-bell", title: "Notification", badge: 15 },
      ],
    }),
  };
</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
foregroundColor String color of the foreground #42A5F5
backgroundColor String color of the background #FFFFFF
badgeColor String color of the button badge #FBC02D
iconColor String color of the button icons and titles #0000008A
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
child-icon child button icons yes
child-title child button title yes

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

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

    <!-- child -->
    <template #child-icon="{ props }">
      <v-icon>{{ props.icon }}</v-icon>
    </template>
    <template #child-title="{ props }">
      <b>{{ props.title }}</b>
    </template>
  </CurvedBottomNavigation>
</template>

← Grow bottom navigation →