NavigationReact Native

Navigation bar

Select among peer application destinations with native visuals and controlled state.

Public APILumenNavigationBarReact Native

Native example

Use Navigation bar

Use for a small set of peer app destinations. Keep hierarchical navigation, history, deep links, restoration, and screen rendering in the application router or native navigation stack.

View verified React Native runtime capture

Navigation bar rendered in the Expo web renderer Lumen playground — Verified runtime captureExpo web renderer

<LumenNavigationBar
  items={destinations}
  value={destination}
  onValueChange={setDestination}
  onReselect={scrollDestinationToTop}
/>

Reference

Public API

The primary shared and platform-specific options exposed by LumenNavigationBar.

API	Values or type	Default	Description
items	`readonly LumenNavigationItem[]`	`Required`	Provides destination values, short labels, native icons, disabled state, and optional dot, text, or capped count badges.
value	`string`	`Required`	Stores the active destination.
onValueChange	`(string) => void`	`Required`	Requests a destination change without owning navigation history.
onReselect	`((value: string) => void)?`	`undefined`	Handles a second activation of the selected destination, such as scrolling to top or popping its stack.
accessibilityLabel	`String`	`Primary navigation`	Names the destination group for assistive technology.

Native behavior

Design and accessibility

When to use it

Use for a small set of peer app destinations. Keep hierarchical navigation, history, deep links, restoration, and screen rendering in the application router or native navigation stack.

Accessibility

The group has a readable navigation label and every destination exposes selected and disabled state through native tab semantics.

Shared component

Available on other platforms

Apple / SwiftUI Android / Compose