NavigationTab
Imports
import {NavigationTab} from 'material-expressive-react';
import {NavigationTab} from 'material-expressive-react/navigation';
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| active | boolean | No | Internal: set by NavigationBar. | |
| badgeValue | string | No | Badge value string. | |
| hideInactiveLabel | boolean | No | Mirrors the previous web component prop name. | |
| index | number | No | Internal: set by NavigationBar. | |
| itemRef | ((el: HTMLButtonElement | null) => void) | No | Internal: set by NavigationBar. | |
| label | string | No | Label text (also used for accessibility when icon-only). | |
| onInteraction | ((event: CustomEvent<{ label?: string; }>) => void) | No | Fired when clicked. | |
| showBadge | boolean | No | Show a badge over the icon. | |
| variant | enum | No | Internal: 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.