{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

NavigationDrawerKt

public final class NavigationDrawerKt


Summary

Public methods

static final void
@Composable
DismissibleDrawerSheet(
    @NonNull Modifier modifier,
    @NonNull Shape drawerShape,
    @NonNull Color drawerContainerColor,
    @NonNull Color drawerContentColor,
    @NonNull Dp drawerTonalElevation,
    @NonNull WindowInsets windowInsets,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Content inside of a dismissible navigation drawer.

static final void
@Composable
DismissibleNavigationDrawer(
    @Composable @NonNull Function0<Unit> drawerContent,
    @NonNull Modifier modifier,
    @NonNull DrawerState drawerState,
    boolean gesturesEnabled,
    @Composable @NonNull Function0<Unit> content
)

Material Design navigation drawer.

static final void
@Composable
ModalDrawerSheet(
    @NonNull Modifier modifier,
    @NonNull Shape drawerShape,
    @NonNull Color drawerContainerColor,
    @NonNull Color drawerContentColor,
    @NonNull Dp drawerTonalElevation,
    @NonNull WindowInsets windowInsets,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Content inside of a modal navigation drawer.

static final void
@Composable
ModalNavigationDrawer(
    @Composable @NonNull Function0<Unit> drawerContent,
    @NonNull Modifier modifier,
    @NonNull DrawerState drawerState,
    boolean gesturesEnabled,
    @NonNull Color scrimColor,
    @Composable @NonNull Function0<Unit> content
)

Material Design navigation drawer.

static final void
@Composable
NavigationDrawerItem(
    @Composable @NonNull Function0<Unit> label,
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    @Composable Function0<Unit> icon,
    @Composable Function0<Unit> badge,
    @NonNull Shape shape,
    @NonNull NavigationDrawerItemColors colors,
    @NonNull MutableInteractionSource interactionSource
)

Material Design navigation drawer item.

static final void
@Composable
PermanentDrawerSheet(
    @NonNull Modifier modifier,
    @NonNull Shape drawerShape,
    @NonNull Color drawerContainerColor,
    @NonNull Color drawerContentColor,
    @NonNull Dp drawerTonalElevation,
    @NonNull WindowInsets windowInsets,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Content inside of a permanent navigation drawer.

static final void
@Composable
PermanentNavigationDrawer(
    @Composable @NonNull Function0<Unit> drawerContent,
    @NonNull Modifier modifier,
    @Composable @NonNull Function0<Unit> content
)

Material Design navigation permanent drawer.

static final @NonNull DrawerState
@Composable
rememberDrawerState(
    @NonNull DrawerValue initialValue,
    @NonNull Function1<@NonNull DrawerValue, @NonNull Boolean> confirmStateChange
)

Create and remember a DrawerState.

Public methods

DismissibleDrawerSheet

@Composable
public static final void DismissibleDrawerSheet(
    @NonNull Modifier modifier,
    @NonNull Shape drawerShape,
    @NonNull Color drawerContainerColor,
    @NonNull Color drawerContentColor,
    @NonNull Dp drawerTonalElevation,
    @NonNull WindowInsets windowInsets,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Content inside of a dismissible navigation drawer.

Parameters
@NonNull Modifier modifier

the Modifier to be applied to this drawer's content

@NonNull Shape drawerShape

defines the shape of this drawer's container

@NonNull Color drawerContainerColor

the color used for the background of this drawer. Use Color.Transparent to have no color.

@NonNull Color drawerContentColor

the preferred color for content inside this drawer. Defaults to either the matching content color for drawerContainerColor, or to the current LocalContentColor if drawerContainerColor is not a color from the theme.

@NonNull Dp drawerTonalElevation

when drawerContainerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface.

@NonNull WindowInsets windowInsets

a window insets for the sheet.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content

content inside of a dismissible navigation drawer

DismissibleNavigationDrawer

@Composable
public static final void DismissibleNavigationDrawer(
    @Composable @NonNull Function0<Unit> drawerContent,
    @NonNull Modifier modifier,
    @NonNull DrawerState drawerState,
    boolean gesturesEnabled,
    @Composable @NonNull Function0<Unit> content
)

Material Design navigation drawer.

Navigation drawers provide ergonomic access to destinations in an app. They’re often next to app content and affect the screen’s layout grid.

Navigation drawer image

Dismissible standard drawers can be used for layouts that prioritize content (such as a photo gallery) or for apps where users are unlikely to switch destinations often. They should use a visible navigation menu icon to open and close the drawer.

import androidx.activity.compose.BackHandler
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Face
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Button
import androidx.compose.material3.DismissibleDrawerSheet
import androidx.compose.material3.DismissibleNavigationDrawer
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationDrawerItem
import androidx.compose.material3.Text
import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()
// icons to mimic drawer destinations
val items = listOf(Icons.Default.Favorite, Icons.Default.Face, Icons.Default.Email)
val selectedItem = remember { mutableStateOf(items[0]) }
BackHandler(enabled = drawerState.isOpen) {
    scope.launch {
        drawerState.close()
    }
}

DismissibleNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        DismissibleDrawerSheet {
            Spacer(Modifier.height(12.dp))
            items.forEach { item ->
                NavigationDrawerItem(
                    icon = { Icon(item, contentDescription = null) },
                    label = { Text(item.name) },
                    selected = item == selectedItem.value,
                    onClick = {
                        scope.launch { drawerState.close() }
                        selectedItem.value = item
                    },
                    modifier = Modifier.padding(horizontal = 12.dp)
                )
            }
        }
    },
    content = {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = if (drawerState.isClosed) ">>> Swipe >>>" else "<<< Swipe <<<")
            Spacer(Modifier.height(20.dp))
            Button(onClick = { scope.launch { drawerState.open() } }) {
                Text("Click to open")
            }
        }
    }
)
Parameters
@Composable @NonNull Function0<Unit> drawerContent

content inside this drawer

@NonNull Modifier modifier

the Modifier to be applied to this drawer

@NonNull DrawerState drawerState

state of the drawer

boolean gesturesEnabled

whether or not the drawer can be interacted by gestures

@Composable @NonNull Function0<Unit> content

content of the rest of the UI

ModalDrawerSheet

@Composable
public static final void ModalDrawerSheet(
    @NonNull Modifier modifier,
    @NonNull Shape drawerShape,
    @NonNull Color drawerContainerColor,
    @NonNull Color drawerContentColor,
    @NonNull Dp drawerTonalElevation,
    @NonNull WindowInsets windowInsets,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Content inside of a modal navigation drawer.

Parameters
@NonNull Modifier modifier

the Modifier to be applied to this drawer's content

@NonNull Shape drawerShape

defines the shape of this drawer's container

@NonNull Color drawerContainerColor

the color used for the background of this drawer. Use Color.Transparent to have no color.

@NonNull Color drawerContentColor

the preferred color for content inside this drawer. Defaults to either the matching content color for drawerContainerColor, or to the current LocalContentColor if drawerContainerColor is not a color from the theme.

@NonNull Dp drawerTonalElevation

when drawerContainerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface.

@NonNull WindowInsets windowInsets

a window insets for the sheet.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content

content inside of a modal navigation drawer

ModalNavigationDrawer

@Composable
public static final void ModalNavigationDrawer(
    @Composable @NonNull Function0<Unit> drawerContent,
    @NonNull Modifier modifier,
    @NonNull DrawerState drawerState,
    boolean gesturesEnabled,
    @NonNull Color scrimColor,
    @Composable @NonNull Function0<Unit> content
)

Material Design navigation drawer.

Navigation drawers provide ergonomic access to destinations in an app.

Modal navigation drawers block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.

Navigation drawer image

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Face
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Button
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.Icon
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.NavigationDrawerItem
import androidx.compose.material3.NavigationDrawerItemDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()
// icons to mimic drawer destinations
val items = listOf(Icons.Default.Favorite, Icons.Default.Face, Icons.Default.Email)
val selectedItem = remember { mutableStateOf(items[0]) }
ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet {
            Spacer(Modifier.height(12.dp))
            items.forEach { item ->
                NavigationDrawerItem(
                    icon = { Icon(item, contentDescription = null) },
                    label = { Text(item.name) },
                    selected = item == selectedItem.value,
                    onClick = {
                        scope.launch { drawerState.close() }
                        selectedItem.value = item
                    },
                    modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
                )
            }
        }
    },
    content = {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = if (drawerState.isClosed) ">>> Swipe >>>" else "<<< Swipe <<<")
            Spacer(Modifier.height(20.dp))
            Button(onClick = { scope.launch { drawerState.open() } }) {
                Text("Click to open")
            }
        }
    }
)
Parameters
@Composable @NonNull Function0<Unit> drawerContent

content inside this drawer

@NonNull Modifier modifier

the Modifier to be applied to this drawer

@NonNull DrawerState drawerState

state of the drawer

boolean gesturesEnabled

whether or not the drawer can be interacted by gestures

@NonNull Color scrimColor

color of the scrim that obscures content when the drawer is open

@Composable @NonNull Function0<Unit> content

content of the rest of the UI

@Composable
public static final void NavigationDrawerItem(
    @Composable @NonNull Function0<Unit> label,
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    @Composable Function0<Unit> icon,
    @Composable Function0<Unit> badge,
    @NonNull Shape shape,
    @NonNull NavigationDrawerItemColors colors,
    @NonNull MutableInteractionSource interactionSource
)

Material Design navigation drawer item.

A NavigationDrawerItem represents a destination within drawers, either ModalNavigationDrawer, PermanentNavigationDrawer or DismissibleNavigationDrawer.

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Face
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Button
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.Icon
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.NavigationDrawerItem
import androidx.compose.material3.NavigationDrawerItemDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()
// icons to mimic drawer destinations
val items = listOf(Icons.Default.Favorite, Icons.Default.Face, Icons.Default.Email)
val selectedItem = remember { mutableStateOf(items[0]) }
ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet {
            Spacer(Modifier.height(12.dp))
            items.forEach { item ->
                NavigationDrawerItem(
                    icon = { Icon(item, contentDescription = null) },
                    label = { Text(item.name) },
                    selected = item == selectedItem.value,
                    onClick = {
                        scope.launch { drawerState.close() }
                        selectedItem.value = item
                    },
                    modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
                )
            }
        }
    },
    content = {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = if (drawerState.isClosed) ">>> Swipe >>>" else "<<< Swipe <<<")
            Spacer(Modifier.height(20.dp))
            Button(onClick = { scope.launch { drawerState.open() } }) {
                Text("Click to open")
            }
        }
    }
)
Parameters
@Composable @NonNull Function0<Unit> label

text label for this item

boolean selected

whether this item is selected

@NonNull Function0<Unit> onClick

called when this item is clicked

@NonNull Modifier modifier

the Modifier to be applied to this item

@Composable Function0<Unit> icon

optional icon for this item, typically an Icon

@Composable Function0<Unit> badge

optional badge to show on this item from the end side

@NonNull NavigationDrawerItemColors colors

NavigationDrawerItemColors that will be used to resolve the colors used for this item in different states. See NavigationDrawerItemDefaults.colors.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this item. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this item in different states.

PermanentDrawerSheet

@Composable
public static final void PermanentDrawerSheet(
    @NonNull Modifier modifier,
    @NonNull Shape drawerShape,
    @NonNull Color drawerContainerColor,
    @NonNull Color drawerContentColor,
    @NonNull Dp drawerTonalElevation,
    @NonNull WindowInsets windowInsets,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Content inside of a permanent navigation drawer.

Parameters
@NonNull Modifier modifier

the Modifier to be applied to this drawer's content

@NonNull Shape drawerShape

defines the shape of this drawer's container

@NonNull Color drawerContainerColor

the color used for the background of this drawer. Use Color.Transparent to have no color.

@NonNull Color drawerContentColor

the preferred color for content inside this drawer. Defaults to either the matching content color for drawerContainerColor, or to the current LocalContentColor if drawerContainerColor is not a color from the theme.

@NonNull Dp drawerTonalElevation

when drawerContainerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface.

@NonNull WindowInsets windowInsets

a window insets for the sheet.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content

content inside a permanent navigation drawer

PermanentNavigationDrawer

@Composable
public static final void PermanentNavigationDrawer(
    @Composable @NonNull Function0<Unit> drawerContent,
    @NonNull Modifier modifier,
    @Composable @NonNull Function0<Unit> content
)

Material Design navigation permanent drawer.

Navigation drawers provide ergonomic access to destinations in an app. They’re often next to app content and affect the screen’s layout grid.

Navigation drawer image

The permanent navigation drawer is always visible and usually used for frequently switching destinations. On mobile screens, use ModalNavigationDrawer instead.

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Face
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationDrawerItem
import androidx.compose.material3.PermanentDrawerSheet
import androidx.compose.material3.PermanentNavigationDrawer
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

// icons to mimic drawer destinations
val items = listOf(Icons.Default.Favorite, Icons.Default.Face, Icons.Default.Email)
val selectedItem = remember { mutableStateOf(items[0]) }
PermanentNavigationDrawer(
    drawerContent = {
        PermanentDrawerSheet(Modifier.width(240.dp)) {
            Spacer(Modifier.height(12.dp))
            items.forEach { item ->
                NavigationDrawerItem(
                    icon = { Icon(item, contentDescription = null) },
                    label = { Text(item.name) },
                    selected = item == selectedItem.value,
                    onClick = {
                        selectedItem.value = item
                    },
                    modifier = Modifier.padding(horizontal = 12.dp)
                )
            }
        }
    },
    content = {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "Application content")
        }
    }
)
Parameters
@Composable @NonNull Function0<Unit> drawerContent

content inside this drawer

@NonNull Modifier modifier

the Modifier to be applied to this drawer

@Composable @NonNull Function0<Unit> content

content of the rest of the UI

rememberDrawerState

@Composable
public static final @NonNull DrawerState rememberDrawerState(
    @NonNull DrawerValue initialValue,
    @NonNull Function1<@NonNull DrawerValue, @NonNull Boolean> confirmStateChange
)

Create and remember a DrawerState.

Parameters
@NonNull DrawerValue initialValue

The initial value of the state.

@NonNull Function1<@NonNull DrawerValue, @NonNull Boolean> confirmStateChange

Optional callback invoked to confirm or veto a pending state change.