<div class='type'>Composable Component</div>



Navigation drawers provide ergonomic access to destinations in an app.

<img loading='lazy' class='hero-img' alt='Navigation drawer image' src='/static/images/material3/navigation-drawer.png'>

<a id='references'></a>



<h2 id="modalnavigationdrawer-drawercontent-modifier-drawerstate-gesturesenabled-scrimcolor-content">ModalNavigationDrawer</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun ModalNavigationDrawer(
    drawerContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
    gesturesEnabled: Boolean = true,
    scrimColor: Color = DrawerDefaults.scrimColor,
    content: @Composable () -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| drawerContent | content inside this drawer |
| modifier | the `Modifier` to be applied to this drawer |
| drawerState | state of the drawer |
| gesturesEnabled | whether or not the drawer can be interacted by gestures |
| scrimColor | color of the scrim that obscures content when the drawer is open |
| content | content of the rest of the UI |