Components · Navigation
Navigation Rail
BetaSince v1.5.0
Navigation for medium-width windows: icons over labels, with an active pill behind the icon.
import { NavigationRail } from '@nexub/react';Examples
Default
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| Root header | ReactNode | — | Slot above the items, e.g. a primary action. |
| Root aria-label | string | 'Main' | Name of the nav landmark. |
| Item icon / labelrequired | ReactNode | — | Icon in the indicator pill; label below. |
| Item active | boolean | — | Marks the current page (aria-current="page"). |
| Item asChild | boolean | — | Use your router link as the item; pass it as the only child. |
On iOS & Android
Web only
Navigation Rail has no @nexub/react-native twin. On phones, follow the platform pattern instead, or compose it from the native components listed on the React Native page.