Sidebar navigation (non-expo)
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.
Package: @terreno/ui
Categories: Component
Props interface: SidebarNavigationPanelProps
Story source: demo/stories/Sidebarnavigation(non-expo).stories.tsx
Live demo
Props
| Prop | Type | Required | Description |
|---|---|---|---|
bottomItems | array | Yes | Navigation items displayed at the bottom of the sidebar. |
children | ReactNode | Yes | Main content rendered beside (web) or behind (mobile) the sidebar. |
onNavigate | reflection | Yes | Called when a navigation item is pressed. |
topItems | array | Yes | 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 | reflection | Called when the panel requests an open or close (controlled mode only). | |
panelStyle | StyleProp | Additional styles applied to the sidebar panel container. |