---
title: "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."
sidebar_label: "Sidebar navigation (non-expo)"
slug: /reference/components/sidebar-navigation-non-expo
---

import ComponentDemo from '@site/src/components/ComponentDemo';

# 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`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Sidebarnavigation(non-expo).stories.tsx)

## Live demo

<ComponentDemo name="Sidebar navigation (non-expo)" />

## 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. |