Morpheme

Appearance

Bottom Navigation ​

The VBottomNavigation component is an alternative to the sidebar. It is primarily used for mobile applications and comes in different colors, icons and and text.

Usage ​

Basic Usage ​

While it is meant to be used with Vue Router, you can also programmatically control the active state by using the item's index.

Default Active ​

You can set the default active of item using default-active prop.

Grow ​

Using the grow property forces the item to fill all available space.

Hide Slider ​

Using the hideSlider property with hide the default slider.

Icon Only ​

Leave the default slot blank to create icon only navigation.

With Vue Router ​

Bottom navigation automatically set active state when using with Vue Router. Add the to prop to the VBottomNavigationItem component and you good to go.

Colors ​

Use color prop to change the active color.

v-model ​

Use v-model to toggle show or hide the component.

With Button ​

You can also add VBtn to the bottom navigation.

With FAB Button ​

You can also add floating action button (FAB) to the bottom navigation.

Props ​

VBottomNavigation ​

NameTypeDefault
modelValuebooleantrue
colorstring'primary'
growbooleanfalse
fixedbooleantrue
defaultActivenumber0
transitionstring'slide-up'

VBottomNavigationItem ​

NameTypeDefault
iconstringundefined
iconSizestring'sm'
textstringundefined
tostring | RouteLocationundefined
hrefstringundefined
nuxtbooleanfalse
asstring | Vue Component'button'
exactActiveClassstring'v-bottom-navigation__item--active'

Events ​

VBottomNavigation ​

NamePayloadDescription
update:modelValue{value: boolean}Fired when modelValue changed

VBottomNavigationItem ​

None

Slots ​

VBottomNavigation ​

NamePropsDescription
default{}The default Vue slot

VBottomNavigationItem ​

NamePropsDescription
default{}The default Vue slot
icon{}Used to place custom icon

CSS Variables ​

scss
:root {
  --v-bottom-navigation-padding-x: 0;
  --v-bottom-navigation-padding-y: var(--size-spacing-3);
  --v-bottom-navigation-bg-color: var(--color-white);
  --v-bottom-navigation-shadow: 4px 0px 20px rgba(0, 0, 0, 0.05);
  --v-bottom-navigation-min-height: 77px;

  // content
  --v-bottom-navigation-content-gap: var(--size-spacing-2);

  // item
  --v-bottom-navigation-item-padding-x: var(--size-spacing-4);
  --v-bottom-navigation-item-padding-y: var(--size-spacing-2);
  --v-bottom-navigation-item-gap: var(--size-spacing-1);
  --v-bottom-navigation-item-color: var(--color-gray-700);

  // active color
  --v-bottom-navigation-item-active-bg-color: var(--color-primary-100);
  --v-bottom-navigation-item-active-color: var(--color-primary-700);

  // hover
  --v-bottom-navigation-item-hover-color: var(--v-bottom-navigation-item-active-color);
}
:root {
  --v-bottom-navigation-padding-x: 0;
  --v-bottom-navigation-padding-y: var(--size-spacing-3);
  --v-bottom-navigation-bg-color: var(--color-white);
  --v-bottom-navigation-shadow: 4px 0px 20px rgba(0, 0, 0, 0.05);
  --v-bottom-navigation-min-height: 77px;

  // content
  --v-bottom-navigation-content-gap: var(--size-spacing-2);

  // item
  --v-bottom-navigation-item-padding-x: var(--size-spacing-4);
  --v-bottom-navigation-item-padding-y: var(--size-spacing-2);
  --v-bottom-navigation-item-gap: var(--size-spacing-1);
  --v-bottom-navigation-item-color: var(--color-gray-700);

  // active color
  --v-bottom-navigation-item-active-bg-color: var(--color-primary-100);
  --v-bottom-navigation-item-active-color: var(--color-primary-700);

  // hover
  --v-bottom-navigation-item-hover-color: var(--v-bottom-navigation-item-active-color);
}

Standalone Installation ​

You can also install the VBottomNavigation component individually via @morpheme/bottom-navigation package:

bash
npm i @morpheme/bottom-navigation
npm i @morpheme/bottom-navigation
vue
<script setup lang="ts">
import {VBottomNavigation, VBottomNavigationItem} from '@morpheme/bottom-navigation';
</script>

<template>
  <VBottomNavigation>
    <VBottomNavigationItem icon="ri:home-line">
      Home
    </VBottomNavigationItem>
    <VBottomNavigationItem icon="ri:history-line">
      Recents
    </VBottomNavigationItem>
    <VBottomNavigationItem icon="ri:heart-line">
      Favorites
    </VBottomNavigationItem>
    <VBottomNavigationItem icon="ri:map-pin-2-line">
      Nearby
    </VBottomNavigationItem>
    <VBottomNavigationItem icon="ri:user-line">
      Account
    </VBottomNavigationItem>
  </VBottomNavigation>
</template>
<script setup lang="ts">
import {VBottomNavigation, VBottomNavigationItem} from '@morpheme/bottom-navigation';
</script>

<template>
  <VBottomNavigation>
    <VBottomNavigationItem icon="ri:home-line">
      Home
    </VBottomNavigationItem>
    <VBottomNavigationItem icon="ri:history-line">
      Recents
    </VBottomNavigationItem>
    <VBottomNavigationItem icon="ri:heart-line">
      Favorites
    </VBottomNavigationItem>
    <VBottomNavigationItem icon="ri:map-pin-2-line">
      Nearby
    </VBottomNavigationItem>
    <VBottomNavigationItem icon="ri:user-line">
      Account
    </VBottomNavigationItem>
  </VBottomNavigation>
</template>

Storybook ​

View Storybook documentation here.