How to Add Navigation Drawer in Jetpack Compose?

Step-by-step guides to add navigation drawer in Jetpack Compose for beginners

This is part of the Jetpack Compose navigation series:

• Part 1 — Simple Jetpack Compose Navigation Example
• Part 2 — Compose Destinations — Navigation Library
• Part 3 — How to Add Bottom Navigation in Jetpack Compose?
• Part 4 — How to Add Navigation Drawer in Jetpack Compose?
• Part 5 — How to Add Deep Links in Jetpack Compose?

This tutorial is built on top of this existing bottom navigation demo app in part 1 that I created previously.

The app starts with login screen, then navigates to home screen. From home screen, you can navigate to either profile or search screen.

We’re going to add the navigation drawer starting from the home screen.

1. Add Top App Bar with Navigation Icon Menu

The top app bar looks like this in home screen.

• Implement TopBar() Composable
• Return if current route is login path, we only want to start showing the top app bar staring from home screen