Creating a Material3 navigation drawer with Jetpack Compose

The Material3 navigation drawer in Android is the right decision when you have more than three or four destinations to navigate to. If you have fewer, you should take into account a bottom navigation bar which is state of the art in a modern Android app. Or you choose a simple toolbar when you have only one or two options.

If you have more options, a navigation drawer can be the right navigation type for you. It provides an own view that appears when you click an icon of your toolbar or you swipe your fingers from the left to the right.

Every single option should display a new screen.

Defining the navigation items for the drawer

First of all define your navigation items with a data class.

One navigation item has a title, two icons for its selected and unselected state, an optional badge count and the route where to navigate when it is clicked.

data class NavigationItem(
	val title:String,
	val selectedIcon:ImageVector,
	val unselectedIcon:ImageVector,
	val badgeCount: Int? = null,
	val route:String
)Code-Sprache: Kotlin (kotlin)

Then you can create your items using this new NavigationItem class.

val items = listOf(
	NavigationItem(
		title = "Home",
		selectedIcon = Icons.Filled.Home,
		unselectedIcon = Icons.Outlined.Home,
		route = Route.HOME
	),
	NavigationItem(
			title = "Results",
			selectedIcon = Icons.Filled.List,
			unselectedIcon = Icons.Outlined.List,
			route = Route.RESULTS
		),
	NavigationItem(
			title = "Settings",
			selectedIcon = Icons.Filled.Settings,
			unselectedIcon = Icons.Outlined.Settings,
			route = Route.SETTINGS
		)
)Code-Sprache: Kotlin (kotlin)

Defining the compose states for the navigation drawer

In your MainActivity you first need to define some states which you need to make the navigation drawer work.

Define a selectedItemIndex which holds the current index of the selected item.

For closing and opening the navigation drawer sheet you also need a drawerState.

And for using the drawerState and to open and close the drawer sheet you need a coroutine context since this operation runs in an own thread.

val selectedItemIndex by remember {
	mutableStateOf(0)
}
val scope = rememberCoroutineScope()
val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)Code-Sprache: Kotlin (kotlin)

Finally the Material3 Navigation drawer

Now you can create a Surface and add the ModalNavigationDrawer to it. This drawer has its own DrawerContent where you need to implement the drawer sheet and the items that should be displayed.

You can see the drawer by swiping your fingers to the right but you can also open the drawer by clicking a button in the toolbar. Therefore you also need to create the toolbar with a menu button to open the drawer from there.

Surface {
	ModalNavigationDrawer(
		drawerContent = {
			Spacer(modifier = Modifier.height(16.dp)
			ModalDrawerSheet {
			items.forEachIndexed { index, item ->
				NavigationDrawerItem(
					label = item.title
					selected = index == selectedItemIndex,
					onClick = {
						selectedItemIndex = index
						scope.launch {
							drawerState.close()
						}
						navController.navigate(item.route)
					},
					icon = {
						Icon(
							imageVector = if (index == selectedItemIndex) item.selectedIcon 
								else item.unselectedIcon,
							contentDescription = item.title
						)
					},
					badge = {
						item.badgeCount?.let {
							Text(text = it.toString())
						}
					},
					modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)	
				)
			)
		}	
	}
) {
	Scaffold(
		topBar = {
			TopAppBar(
				title = { Text(text = "My App title")},
				navigationIcon = {
					IconButton(onClick = {
						scope.launch {
							drawerState.open()
						}) {
							Icon(
								imageVector = Icons.Default.Menu,
								contentDescription = "Menu"
							)
						}
					}
				}
			)
		}
	) {
		NavHost()..... 
	}
}Code-Sprache: Kotlin (kotlin)

Below the ModalNavigationDrawer you need a Scaffold where you can define the top app bar (toolbar). This has a title and the button that opens the drawer when clicked.

The Scaffold itself holds all the other content, such as your composables, to which you can navigate.

Before defining the ModalDrawerSheet you should add a Spacer with at least 16 density pixels height so that the content has enough space.

And that’s it. You have now implemented a fully working Material3 navigation drawer in Android which you now can fill with life by adding some more screens and composables to it.

Here you can find more information about implementing Material3 drawer.

Click here to watch how Phillip Lackner implements a navigation drawer in Android.