Navigation drawer

A side panel with many destinations. Modal, dismissible or permanent.

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

When to use

Use a modal drawer on compact windows, a dismissible drawer when the content should shift aside, and a permanent drawer on large windows where there is room. This documentation uses exactly that pattern.

For new designs on medium and expanded windows, the wide navigation rail is the recommended component. The drawers remain supported.

Examples

Permanent drawer

Always visible next to the content.

var selected by rememberSaveable { mutableIntStateOf(0) }
val items = listOf(
    Icons.Rounded.Inbox to "Inbox",
    Icons.Rounded.Send to "Sent",
    Icons.Rounded.Star to "Starred",
)

Box(Modifier.fillMaxWidth().height(260.dp)) {
    PermanentNavigationDrawer(
        drawerContent = {
            PermanentDrawerSheet(Modifier.padding(end = 0.dp)) {
                Text("Mail", Modifier.padding(24.dp), style = MaterialTheme.typography.titleLarge)
                items.forEachIndexed { index, (icon, label) ->
                    NavigationDrawerItem(
                        icon = { Icon(icon, contentDescription = null) },
                        label = { Text(label) },
                        selected = selected == index,
                        onClick = { selected = index },
                        modifier = Modifier.padding(horizontal = 12.dp),
                    )
                }
            }
        },
    ) {
        Box(Modifier.fillMaxWidth().padding(24.dp), contentAlignment = Alignment.TopStart) {
            Text(items[selected].second, style = MaterialTheme.typography.headlineMedium)
        }
    }
}

Parameters

Name	Type	Default	Description
`drawerContent`	`@Composable () -> Unit`		Usually a ModalDrawerSheet, DismissibleDrawerSheet or PermanentDrawerSheet.
`drawerState`	`DrawerState`	`rememberDrawerState(Closed)`	Modal and dismissible drawers only.
`gesturesEnabled`	`Boolean`	`true`	Allows opening and closing by swipe.

Guidelines

Do:

Group destinations under headers.
Highlight the active destination.

Don't:

Do not nest drawers.
Do not put actions that are not destinations into a drawer.

Accessibility

Move focus into the drawer when it opens and back to the menu button when it closes.
The modal drawer closes on Escape and on the scrim.