NavigationBar

Imports

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

Props

Prop	Type	Default	Required	Description
activeIndex	number		No	Controlled active index.
defaultActiveIndex	number	0	No	Uncontrolled initial active index.
hideInactiveLabels	boolean	false	No	Hide labels for inactive items.
onActivated	((event: CustomEvent<{ activeIndex: number; }>) => void)		No	Fires when the active item changes.
variant	enum	vertical	No	Layout of each item (icon+label stacked vs inline).

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.