How to Add Navigation Drawer in Jetpack Compose?
Tags: android, kotlin, beginners, jetpackcompose
Published: 2022-10-06 22:38:44

**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](https://vtsen.hashnode.dev/simple-jetpack-compose-navigation-example)
    
*   [Part 2 - Compose Destinations - Navigation Library](https://vtsen.hashnode.dev/compose-destinations-navigation-library)
    
*   [Part 3 - How to Add Bottom Navigation in Jetpack Compose?](https://vtsen.hashnode.dev/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?](https://vtsen.hashnode.dev/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.

![How_to_Add_Navigation_Drawer_in_Jetpack_Compose_01.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657799720306/o1BWjw23t.png)

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

```kotlin
@Composable
fun TopBar(
    navController: NavController,
    onNavigationIconClick: () -> Unit,
) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route

    if (currentRoute == null || currentRoute == NavRoute.Login.path) {
        return
    }

    TopAppBar(
        title = {
            Text(text = stringResource(id = R.string.app_name))
        },
        navigationIcon = {
            IconButton(onClick = onNavigationIconClick) {
                Icon(
                    imageVector = Icons.Default.Menu,
                    contentDescription = null,
                )
            }
        },
    )
}
```
- In `MainScreen()`, pass in the `TopBar()` as parameter into `Scaffold()`
- Remember also pass in the `scaffoldState`. If you miss this step, the navigation drawer won't be shown
- When the navigation icon is clicked, start the coroutine to call `scaffoldState.drawerState.open()` to open the navigation drawer (to be implemented later)

```kotlin
val navController = rememberNavController()
val scaffoldState = rememberScaffoldState()
val scope =  rememberCoroutineScope()

Scaffold(
    scaffoldState = scaffoldState,
    topBar = { TopBar(
        navController =navController,
        onNavigationIconClick = {
            scope.launch {
                scaffoldState.drawerState.open()
            }
        }
    ) },
    bottomBar = { BottomBarNav(navController = navController) },
) {
    NavGraph(navController)
}
```

## 2. Add Navigation Drawer and Body

The preview looks like this.

![How_to_Add_Navigation_Drawer_in_Jetpack_Compose_02.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657861528575/DJo87RuAr.png)

- Add drawer header, the header is just a simple text

```kotlin
@Composable
fun DrawerHeader(){
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 64.dp)
        ,
        horizontalArrangement = Arrangement.Center,
    ) {
        Text(text = "Header", fontSize = 60.sp)
    }
}
```

- Add drawer menu item which contains icon and text in a row

```kotlin
@Composable
private fun DrawerMenuItem(
    iconDrawableId: Int,
    text: String,
    onItemClick: () -> Unit){
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clickable {onItemClick()}
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically,
    ){
        Icon(
            painter = painterResource(iconDrawableId),
            contentDescription = null,
        )
        Spacer(modifier = Modifier.width(16.dp))
        Text(text = text, )
    }
}
```

- Add drawer body to include the home and search drawer menu item

```kotlin
@Composable
fun DrawerBody(navController: NavHostController?, closeNavDrawer: () -> Unit) {
    Column {
        DrawerMenuItem(
            iconDrawableId = R.drawable.ic_home,
            text = NavRoute.Home.path,
            onItemClick = {
                navController?.navigate(NavRoute.Home.path)
                closeNavDrawer()
            }
        )
        DrawerMenuItem(
            iconDrawableId = R.drawable.ic_search,
            text = NavRoute.Search.path,
            onItemClick = {
                navController?.navigate(NavRoute.Search.withArgs("liang moi"))
                closeNavDrawer()
            }
        )
    }
}

```

## Done

![How_to_Add_Navigation_Drawer_in_Jetpack_Compose_03.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1657879421949/noa7sqoak.gif)

## Source Code
GitHub Repository: [Demo_SimpleNavigationCompose(bottom_nav_drawer branch)](https://github.com/vinchamp77/Demo_SimpleNavigationCompose/tree/bottom_nav_drawer)

---

*Originally published at [https://vtsen.hashnode.dev](https://vtsen.hashnode.dev/how-to-add-navigation-drawer-in-jetpack-compose)*.