Glowup
NAVIGATION · 75 / 89
NavigationBar
NavigationBar — a Material You navigation component for React Native and web.
󱀫
packages/ui/src/components/NavigationBar.tsx
Live demo
Properties
2 controls
Active Id
Show Labels
Always
󰍝
Usage
NavigationBar.tsx
<NavigationBar activeId="home" />
Variants
The states and shapes this component is meant to be used in.
Default
Labels on selected
With disabled item
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
4 on NavigationBarProps
activeId
required
string
items
required
NavigationBarItem[]
onItemPress
required
(id: string) => void
showLabels
"always" | "selected"
default: "always"
"always" shows every label, "selected" only the active one.
󰅁
Previous
TopAppBar
Next
NavigationRail
󰅂