Glowup
NAVIGATION · 76 / 89
NavigationRail
NavigationRail — a Material You navigation component for React Native and web.
󱀫
packages/ui/src/components/NavigationRail.tsx
Live demo
Properties
4 controls
Active Id
Show Labels
Always
󰍝
Alignment
Top
󰍝
Menu + FAB header
Usage
NavigationRail.tsx
<NavigationRail activeId="home" />
Variants
The states and shapes this component is meant to be used in.
With menu and FAB
Selected label only, centred
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
9 on NavigationRailProps
Filter props
󰍉
activeId
required
string
`id` of the current destination.
items
required
NavigationBarItem[]
Destinations, same shape as `NavigationBar`'s. Three to seven per M3.
onItemPress
required
(id: string) => void
alignment
"top" | "center"
default: "top"
Where the destinations sit vertically. Defaults to `"top"`.
footer
React.ReactNode
Pinned to the bottom of the rail.
header
React.ReactNode
Above the destinations: typically a menu `IconButton` and/or a `FAB`.
showLabels
"always" | "selected" | "none"
default: "always"
`"always"` labels every destination, `"selected"` only the active one, `"none"` none (the label is still the accessible name). Defaults to `"always"`.
style
StyleProp<ViewStyle>
testID
string
󰅁
Previous
NavigationBar
Next
NavigationDrawer
󰅂