Modal and dismissible drawer

A navigation panel that slides over the content or pushes it aside, and can be closed again.

Category: Navigation
API status: Stable
Compose APIs: ModalNavigationDrawer, DismissibleNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet, rememberDrawerState
Interactive page: https://m3e.ljzapps.app/#components/modal-navigation-drawer

When to use

The modal drawer dims the content behind a scrim and closes on outside click, swipe or Escape. The dismissible drawer shares the screen with the content and is closed by the menu button.

Control either one with a DrawerState. open and close are suspend functions, so call them from a coroutine.

Playground

The interactive page has a playground with live property controls for this component and generated code.

Examples

Modal drawer

val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()

Box(Modifier.fillMaxWidth().height(300.dp)) {
    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            ModalDrawerSheet {
                Text("Mail", Modifier.padding(24.dp), style = MaterialTheme.typography.titleLarge)
                NavigationDrawerItem(
                    icon = { Icon(Icons.Rounded.Inbox, contentDescription = null) },
                    label = { Text("Inbox") },
                    selected = true,
                    onClick = { scope.launch { drawerState.close() } },
                    modifier = Modifier.padding(horizontal = 12.dp),
                )
            }
        },
    ) {
        Box(Modifier.fillMaxSize().padding(24.dp)) {
            Button(onClick = { scope.launch { drawerState.open() } }) { Text("Open drawer") }
        }
    }
}

Parameters

Name	Type	Default	Description
`drawerState`	`DrawerState`	`rememberDrawerState(Closed)`	Open, close and observe the drawer.
`gesturesEnabled`	`Boolean`	`true`	Swipe to open and close.
`drawerContent`	`@Composable () -> Unit`		The sheet with NavigationDrawerItems.
`scrimColor`	`Color`	`DrawerDefaults.scrimColor`	Modal drawer only.

Guidelines

Do:

Close the drawer after navigating.
Highlight the current destination.

Don't:

Do not use a drawer with fewer than four destinations.
Do not nest destinations deeper than two levels.

Accessibility

A modal drawer traps focus and returns it to the menu button on close.
Escape closes the drawer. Keep the menu button labeled.