Skip to main content

NavigationTab

Imports​

import {NavigationTab} from 'material-expressive-react';
import {NavigationTab} from 'material-expressive-react/navigation';

Props​

PropTypeDefaultRequiredDescription
activebooleanNoInternal: set by NavigationBar.
badgeValuestringNoBadge value string.
hideInactiveLabelbooleanNoMirrors the previous web component prop name.
indexnumberNoInternal: set by NavigationBar.
itemRef((el: HTMLButtonElement | null) => void)NoInternal: set by NavigationBar.
labelstringNoLabel text (also used for accessibility when icon-only).
onInteraction((event: CustomEvent<{ label?: string; }>) => void)NoFired when clicked.
showBadgebooleanNoShow a badge over the icon.
variantenumNoInternal: set by NavigationBar.

Events​

This component does not explicitly re-emit DOM events via wrapper props.

Slots​

Material Web components frequently use named slots. In React, you can pass slot="..." on children (e.g. <Icon slot="icon" />).

If you need to slot a child component that does not accept a slot prop, use the Slotted utility (see Utilities → Slotted).

Examples​

See Storybook for live examples and variants.