BottomNavigationItem

Represents a single item in a bottom navigation bar.

Importing

Web

import "@tapsioss/web-components/bottom-navigation";

React

import { BottomNavigationItem } from "@tapsioss/react-components/BottomNavigationItem";

Component Usage

Web

<tapsi-bottom-navigation-item></tapsi-bottom-navigation-item>

React

<BottomNavigationItem />

Properties

Name	Description	Type	Default Value
active	Indicates whether the item is active or not.	boolean	false
value	The value associated with the item. This value has to be unique among sibling items.	string	""

Slots

Name	Description
icon	The slot for the icon element.
-	The default slot for the content/label.

TIP

You can use slot names as variables:

Web

import { ItemSlots } from "@tapsioss/web-components/bottom-navigation";

console.log(ItemSlots.ICON); // "icon"
console.log(ItemSlots.DEFAULT); // ""

React

import { BottomNavigationItemSlots } from "@tapsioss/react-components";

console.log(BottomNavigationItemSlots.ICON); // "icon"
console.log(BottomNavigationItemSlots.DEFAULT); // ""