[component]

Dev Mode
Sidebar navigation (non-expo)
Description
Standalone sidebar panel without expo-router dependency. Renders a collapsible icon rail on web that expands on hover, and a hamburger-triggered slide-in drawer on mobile. Use this when you need sidebar navigation outside of an expo-router layout context.
Main Content
Active route: index
Panel background color
Item background color
Badge status
Usage Guidelines
Do
Use when you need sidebar navigation without expo-router (e.g. demos, custom navigation stacks).
Place frequently used routes in topItems and secondary actions (settings, logout) in bottomItems.
Don't
Do not use for temporary or contextual navigation — use Side Drawer instead.
Do not put too many items in either group — consider grouping under sub-routes.
Accessibility
Each navigation item is a pressable with an accessibility label matching the item label.
The hamburger menu button on mobile has an accessibility label for screen readers.
Props
Name
Type
Required
Description
bottomItems
Required
Navigation items displayed at the bottom of the sidebar.
children
ReactNode
Required
Main content rendered beside (web) or behind (mobile) the sidebar.
onNavigate
Required
Called when a navigation item is pressed.
topItems
Required
Navigation items displayed at the top of the sidebar.
activeRoute
string
The currently active route, used to highlight the matching item.
isOpen
boolean
Controlled open state. When provided, the panel hides its internal hamburger button and defers open/close to the caller.
itemStyle
StyleProp
Additional styles applied to each navigation item.
onOpenChange
Called when the panel requests an open or close (controlled mode only).
panelStyle
StyleProp
Additional styles applied to the sidebar panel container.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Related
Sidebar navigation (expo-router), Side drawer, Page
Examples
Default
Main Content
Active route: index
Minimal
A sidebar with only a few items.
Active: index
ManyItems
A sidebar with many navigation items in both groups.
Admin Panel
Viewing: analytics