File: drawer.md | Updated: 11/15/2025
Hide navigation
Search
Ctrl K
Home Guides EAS Reference Learn
Archive Expo Snack Discord and Forums Newsletter
Copy page
Learn how to use the Drawer layout in Expo Router.
Copy page
A navigation drawer is a common pattern in mobile apps, it allows users to swipe open a menu from a side of their screen to expose navigation options. This menu is also typically toggleable through a button in the app's header.
SDK 54 and later
SDK 53 and earlier
To use drawer navigator
you'll need to install some additional dependencies if you do not have them already. On Android and iOS, the drawer navigator requires react-native-reanimated and react-native-worklets to drive its animations. On web, this is handled by CSS animations.
Terminal
Copy
- npx expo install @react-navigation/drawer react-native-reanimated react-native-worklets
To use drawer navigator
you'll need to install some additional dependencies if you do not have them already. On Android and iOS, the drawer navigator requires react-native-reanimated and react-native-gesture-handler to drive its animations. On web, this is handled by CSS animations.
Terminal
Copy
- npx expo install @react-navigation/drawer react-native-reanimated react-native-gesture-handler
Now you can use the Drawer layout to create a drawer navigator.
app/_layout.tsx
Copy
import { Drawer } from 'expo-router/drawer'; export default function Layout() { return <Drawer />; }
To edit the drawer navigation menu labels, titles and screen options specific screens are required as follows:
app/_layout.tsx
Copy
import { Drawer } from 'expo-router/drawer'; export default function Layout() { return ( <Drawer> <Drawer.Screen name="index" // This is the name of the page and must match the url from root options={{ drawerLabel: 'Home', title: 'overview', }} /> <Drawer.Screen name="user/[id]" // This is the name of the page and must match the url from root options={{ drawerLabel: 'User', title: 'overview', }} /> </Drawer> ); }
Show More