BottomNavigation

The bottom navigation bar component.

Importing

Web

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

React

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

Component Usage

Web

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

React

<BottomNavigation />

Properties

Name	Description	Type	Default Value
label	Defines a string value that can be used to set a label for assistive technologies. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label	string	-

Slots

Name	Description
-	The default slot for navigation items.

TIP

You can use slot names as variables:

Web

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

console.log(Slots.DEFAULT); // ""

React

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

console.log(BottomNavigationSlots.DEFAULT); // ""

Events

Name	Description	Type
activechange	Fired when the items activation state changes (Bubbles).	ActiveChangeEvent

TIP

You can import custom event names:

Web

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

element.addEventListener(ActiveChangeEvent.type, handleTapsiBottomNavigationActiveChange);

React

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


// ...

<BottomNavigation
  onActiveChangeEvent={(e: BottomNavigationActiveChangeEvent) => {...}}
/>