# 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

```kotlin
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.

## Related components

- [Navigation drawer](https://m3e.ljzapps.app/docs/components/navigation-drawer.md)
- [Navigation rail](https://m3e.ljzapps.app/docs/components/navigation-rail.md)
- [Modal navigation rail](https://m3e.ljzapps.app/docs/components/modal-navigation-rail.md)