State of Compose 2023 results are in! Click here to learn more

← Back to Tv Material

ModalNavigationDrawer

Component
in
Tv Material
. Since 1.0.0-alpha07

Overview

Code Examples

Video

Navigation drawers provide ergonomic access to destinations in an app. Modal navigation drawers are good for infrequent, but more focused, switching to different destinations.

It displays content associated with the closed state when the drawer is not in focus and displays content associated with the open state when the drawer or its contents are focused on. Modal navigation drawers are elevated above most of the app’s UI and don’t affect the screen’s layout grid.

Example:

Overloads

ModalNavigationDrawer

@ExperimentalTvMaterial3Api
@Composable
fun ModalNavigationDrawer(
    drawerContent: @Composable (DrawerValue) -> Unit,
    modifier: Modifier = Modifier,
    drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
    scrimColor: Color = LocalColorScheme.current.scrim.copy(alpha = 0.5f),
    content: @Composable () -> Unit
)

Parameters

NameDescription
drawerContentContent that needs to be displayed on the drawer based on whether the drawer is DrawerValue.Open or DrawerValue.Closed. Drawer-entries can be animated when the drawer moves from Closed to Open state and vice-versa. For, e.g., the entry could show only an icon in the Closed state and slide in text to form (icon + text) when in the Open state. To limit the width of the drawer in the open or closed state, wrap the content in a box with the required width.
modifierthe Modifier to be applied to this drawer
drawerStatestate of the drawer
scrimColorcolor of the scrim that obscures content when the drawer is open
contentcontent of the rest of the U