Bottom Navigation Compound

The bottom navigation component that offers global, persistent navigation throughout an app.

Importing

To use the bottom navigation component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

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

register(); // Now the bottom navigation component is ready to use!

Web (Option 2)

import { registerBottomNavigation } from "@tapsioss/web-components";

registerBottomNavigation(); // Now the bottom navigation component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

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

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

INFO

By registering the bottom navigation component, its compound parts will also be registered:

• tapsi-bottom-navigation-item

In the React package, you can easily add the component using the following code:

React

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

Component Usage

Web

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

React

<BottomNavigation />

Properties

Name	Attribute Name	Description	Type	Default Value
label	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	Value	Description
DEFAULT	-	The default slot for navigation items.

TIP

The value of slots are available for developer as JavaScript Variables:

Web

// Option 1
import { BottomNavigationSlots, BottomNavigationItemSlots } from "@tapsioss/web-components";

// Option 2
import { Slots, ItemSlots } from "@tapsioss/web-components/bottom-navigation";

React

// Option 1
import { BottomNavigationSlots, BottomNavigationItemSlots } from "@tapsioss/react-components";

// Option 2
import { Slots, ItemSlots } from "@tapsioss/react-components/BottomNavigation";

Events

Name	Description	Type	Bubbles	Cancelable
activechange	Fired when the items activation state changes.	ActiveChangeEvent	✅	❌

TIP

Event details are available as JavaScript variables:

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

// Option 2
import {
 BottomNavigationActiveChangeEvent
} from "@tapsioss/web-components";

You can have access to the event name using the type property:

// Option 1
element.addEventListener(ActiveChangeEvent.type, handleActiveChange);

// Option 2
element.addEventListener(BottomNavigationActiveChangeEvent.type, handleActiveChange);

Compound Parts

Item

The item part of the bottom navigation.

Importing

By registering the parent component, the bottom navigation item will also be registered.

In the React package, you can easily add the component using the following code:

React

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

Component Usage

Web

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

React

<BottomNavigationItem />

Properties

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

Slots

Name	Value	Description
DEFAULT	-	The slot for the icon element.
ICON	icon	The slot for the icon element.