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

← Back to Tv Material

NavigationDrawer

Component
in
Tv Material
. Since 1.0.0-alpha07

Overview

Code Examples

Video

Navigation drawers provide ergonomic access to destinations in an app. They’re often next to app content and affect the screen’s layout grid. Standard navigation drawers are good for frequent 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. The drawer is at the same level as the app's UI an reduces the screen size available to the remaining content.

Example:

Overloads

@ExperimentalTvMaterial3Api
@Composable
fun NavigationDrawer(
    drawerContent: @Composable (DrawerValue) -> Unit,
    modifier: Modifier = Modifier,
    drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
    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
contentcontent of the rest of the U