Implementing a Navigation Drawer in Material 3 with Jetpack Compose

In this article, we will discuss how to implement a navigation drawer in Material 3 using Jetpack Compose. The navigation drawer is a common UI pattern in Android applications, allowing users to navigate between different screens or destinations in the app.

Material 3 has introduced a new way to implement the navigation drawer as a standalone component, separate from the Scaffold composable. This change provides more flexibility and control over the design and behavior of the navigation drawer

To implement a navigation drawer in Material 3, you can use the ModalNavigationDrawer composable. This composable takes a drawerState and a drawerContent as parameters. The drawerState is a rememberDrawerState that keeps track of whether the drawer is open or closed. The drawerContent is a composable function that defines the content of the drawer.

Here is a sample code snippet that demonstrates how to use ModalNavigationDrawer:

@Preview
@Composable
fun ModalNavigationDrawerSample() {
   val drawerState = rememberDrawerState(DrawerValue.Closed)
   val scope = rememberCoroutineScope()
   // icons to mimic drawer destinations
   val items = listOf(Icons.Default.Favorite, Icons.Default.Face, Icons.Default.Email)
   val selectedItem = remember { mutableStateOf(items[0]) }
   ModalNavigationDrawer(
       drawerState = drawerState,
       drawerContent = {
           ModalDrawerSheet {
               Spacer(Modifier.height(12.dp))
               items.forEach { item ->
                  NavigationDrawerItem(
                      icon = { Icon(item, contentDescription = null) },
                      label = { Text(item.name) },
                      selected = item == selectedItem.value,
                      onClick = {
                          scope.launch { drawerState.close() }
                          selectedItem.value = item
                      },
                      modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
                  )
               }
           }
       },
       content = {
           Column(
               modifier = Modifier
                  .fillMaxSize()
                  .padding(16.dp),
               horizontalAlignment = Alignment.CenterHorizontally
           ) {
               Text(text = if (drawerState.isClosed) ">>> Swipe >>>" else "<<< Swipe <<<")
               Spacer(Modifier.height(20.dp))
               Button(onClick = { scope.launch { drawerState.open() } }) {
                  Text("Click to open")
               }
           }
       }
   )
}

In the above code, ModalNavigationDrawer is used to create a navigation drawer. The drawerContent parameter is used to define the content of the drawer. Inside the drawerContent, a ModalDrawerSheet is used to contain the items of the drawer. Each item is a NavigationDrawerItem that displays an icon and a label. The onClick function of each item is used to close the drawer and update the selected item.

The content parameter of ModalNavigationDrawer is used to define the main content of the screen. In this case, it is a Column that displays a text and a button. The button is used to open the drawer.

Please note that the navigation drawer in Material 3 is designed to work with the NavController for navigation between different screens. You can use the NavController to navigate to the corresponding route when an item in the navigation drawer is clicked.

In conclusion, Material 3 provides a flexible and powerful way to implement a navigation drawer in Jetpack Compose. By using the ModalNavigationDrawer composable and the NavController, you can create a navigation drawer that fits the Material Design guidelines and provides a good user experience.

References are taken from : 1. proandroiddev.com 2. stackoverflow.com 3. stackoverflow.com