---
title: "Side drawer"
description: "Side drawers function like the Material navigation drawer. They open up a surface that allows the system to display information, navigation, or other content."
sidebar_label: "Side drawer"
slug: /reference/components/side-drawer
---

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

# Side drawer

Side drawers function like the Material navigation drawer. They open up a surface that allows the system to display information, navigation, or other content.

**Package:** `@terreno/ui`  
**Categories:** Component  
**Props interface:** `SideDrawerProps`  
**Story source:** [`demo/stories/Sidedrawer.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Sidedrawer.stories.tsx)

## Live demo

<ComponentDemo name="Side drawer" />

## Props

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `isOpen` | `boolean` | Yes |  |
| `renderContent` | `reflection` | Yes |  |
| `children` | `ReactElement` |  |  |
| `drawerStyles` | `StyleProp` |  |  |
| `drawerType` | `union` |  |  |
| `onClose` | `reflection` |  |  |
| `onOpen` | `reflection` |  |  |
| `position` | `union` |  |  |