BottomNavigationBar

A navigation bar typically displayed at the bottom of an app, allowing users to select between different views.

It supports both Material Design and iOS (Cupertino) styles via the variant prop.

Usage

🏠Home

💼Business

🎓School

Selected Index: 0

<template>
  <div class="demo-container">
    <div style="margin-bottom: 20px; text-align: center">
      <Button @click="toggleVariant">
        <Text>Switch to {{ variant === "ios" ? "Material" : "iOS" }} Style</Text>
      </Button>
    </div>

    <Container :height="300" color="#f0f0f0" alignment="bottomCenter">
      <BottomNavigationBar :items="items" v-model:currentIndex="currentIndex" :variant="variant" />
    </Container>

    <div style="margin-top: 20px; text-align: center">
      <Text>Selected Index: {{ currentIndex }}</Text>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { BottomNavigationBar, Container, Button, Text } from "fluekit";

const currentIndex = ref(0);
const variant = ref<"material" | "ios">("material");

const toggleVariant = () => {
  variant.value = variant.value === "material" ? "ios" : "material";
};

// Simple icon components for demo
const IconHome = { template: "<span>🏠</span>" };
const IconBusiness = { template: "<span>💼</span>" };
const IconSchool = { template: "<span>🎓</span>" };

const items = [
  { icon: IconHome, label: "Home" },
  { icon: IconBusiness, label: "Business" },
  { icon: IconSchool, label: "School" },
];
</script>

API

Props

Name	Type	Default	Description
items	BottomNavigationBarItem[]	-	The list of items to display in the navigation bar.
currentIndex	number	0	The index of the currently selected item.
variant	'material' | 'ios'	'material'	The visual style of the navigation bar.
backgroundColor	string	-	Background color of the navigation bar.
selectedItemColor	string	-	Color of the selected item icon and label.
unselectedItemColor	string	-	Color of unselected items.
showSelectedLabels	boolean	true	Whether to show labels for selected items.
showUnselectedLabels	boolean	true	Whether to show labels for unselected items.
elevation	number	8	The z-coordinate (shadow) of the navigation bar (Material only).

BottomNavigationBarItem

Property	Type	Description
icon	Component	The icon to display.
activeIcon	Component	The icon to display when selected (optional).
label	string	The text label for the item.

Events

Name	Description	Parameters
update:currentIndex	Emitted when the selected index changes.	index: number
tap	Emitted when an item is tapped.	index: number