REACT-NATIVES
WIRED FOR SPEED
react-natives v2.2.0
Theme
Light
Dark
Get Started
Menu
Components
Navigation
Breadcrumb
A compound navigation component that displays the current page location within a hierarchy using linked trail items.
Example
Preview
Code
Props
Breadcrumb Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the breadcrumb container.
separator
string | React.ReactNode
'/'
The separator character or element between breadcrumb items.
BreadcrumbItem Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the breadcrumb item.
isCurrent
boolean
false
Marks this item as the current page (typically renders as non-interactive).
BreadcrumbLink Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the breadcrumb link.
href
string
—
The URL or route path to navigate to.
BreadcrumbText Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the breadcrumb text.
Usage Guidelines
When to use
Use Breadcrumb to show hierarchical navigation context and allow users to navigate back to parent pages.
Best practices
•
Use for hierarchical navigation that is 2-4 levels deep.
•
Mark the current page with isCurrent on the last BreadcrumbItem.
•
Keep breadcrumb labels concise.
Accessibility
Breadcrumb renders a nav landmark with ordered list structure. Current item uses aria-current for screen readers.
Related Components
Link
A pressable link component for in-app and external navigation with accessible text styling.
Tabs
A compound tabbed interface component with tab list, individual tabs, and content panels for organizing content into switchable views.
Text
A typographic component for rendering text with built-in size, weight, and decoration variants.
React-Natives
A comprehensive React Native component library.
Documentation
Getting Started
Components
Theming
Community
GitHub
Discord
Twitter
Blog
Support
FAQ
Contact
Contributing
License
© 2026 React-Natives. Wired by WireServers-UI.