NavigationRailItem

Navigation rail items are the destinations a navigation rail switches between.

Developer experience

Selection is index-based and provided by the parent rail.
extendedOnly hides items when the rail is collapsed.
badge puts a Badge on the icon, the way Material shows notifications on a destination; pass undefined once the destination is selected if the notification is meant to clear, and the badge animates out.
The label reveal (width/height + opacity, on extended changes) is driven by a shared @udixio/core/dom Motion controller, the same one the Angular adapter uses.

Exposes aria-current="page" when selected, since the rail is a navigation landmark rather than a tabbed panel switcher.

No arrow-key navigation between items; relies on the native sequential tab order (a roving tabindex is only required for tablist/listbox widgets, which this is not).

React props
Name	Type	Required	Default	Description
`badge`	`BadgeProps`	No	`—`	A badge on the icon, the way Material 3 shows notifications on a destination: `{}` is the small dot, `{ label: 3 }` the count. Material recommends removing it once the destination has been viewed, which is the caller's call -- pass `undefined` when the item is selected.
`selected`	`boolean`	No	`false`	Controlled selected state, used when no parent drives the selection.
`variant`	`"vertical" \| "horizontal"`	No	`'vertical'`	Injected by the parent NavigationRail: layout direction of the item.
`index`	`number`	No	`—`	Injected by the parent NavigationRail: position of this item in the rail.
`selectedItem`	`number`	No	`—`	Injected by the parent NavigationRail: index of the currently selected item.
`isExtended`	`boolean`	No	`—`	Injected by the parent NavigationRail: whether the rail is extended.
`extendedOnly`	`boolean`	No	`—`	Injected by the parent NavigationRail: hide the item while the rail is collapsed.