NavigationBarItem

Imports

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

Props

Prop	Type	Default	Required	Description
active	boolean	false	No	Internal: set by NavigationBar.
activeIcon	ReactNode		No	Icon shown when active (falls back to icon).
badge	ReactNode		No	Optional badge shown on the icon.
hideInactiveLabel	boolean	false	No	Internal: set by NavigationBar.
icon	ReactNode		No	Icon shown when inactive.
index	number		No	Internal: set by NavigationBar.
itemRef	((el: HTMLButtonElement | null) => void)		No	Internal: set by NavigationBar.
label	string		No	Label displayed under/next to the icon.
onSelect	(() => void)		No	Internal: set by NavigationBar.
variant	enum	vertical	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.