Material 3 Navigation Drawer in Jetpack Compose

Get started with Material 3 navigation drawer in Jetpack Compose to create user-friendly interfaces for navigating app sections.

Explore Navigation Drawer Styles

Learn to implement two Material 3 navigation drawer types for navigating app sections.

Basic Navigation Drawer

Shows a simple slide-in menu.

@Composable
fun BasicNavigationDrawerExample() {
    // Creates a simple navigation drawer
    ModalNavigationDrawer(
        drawerContent = {
            ModalDrawerSheet {
                Text("Drawer title", modifier = Modifier.padding(16.dp)) // Defines drawer title
                HorizontalDivider() // Separates items
                NavigationDrawerItem(
                    label = { Text(text = "Drawer Item") }, // Displays item text
                    selected = false, // Indicates selection state
                    onClick = { /* Handle click */ } // *Required: Handles item click
                )
            }
        } // *Required: Defines drawer content
    ) {
        Text("Screen content") // *Required: Defines main screen content
    }
}
  

Use a Basic Navigation Drawer when you want to show a simple slide-in menu.

Examples:

• Show a minimal menu in a news app
• Display navigation options in a utility app
• Present quick links in a simple app

---

Detailed Navigation Drawer

Shows a menu with sections and icons.

@Composable
fun DetailedNavigationDrawerExample() {
    // Creates a navigation drawer with sections
    ModalNavigationDrawer(
        drawerContent = {
            ModalDrawerSheet {
                Column(
                    modifier = Modifier.padding(horizontal = 16.dp) // Customizes drawer layout
                ) {
                    Spacer(Modifier.height(12.dp)) // Adds spacing
                    Text(
                        "Drawer Title",
                        modifier = Modifier.padding(16.dp), // Adds title padding
                        style = MaterialTheme.typography.titleLarge // Sets title style
                    )
                    HorizontalDivider() // Separates sections
                    Text(
                        "Section 1",
                        modifier = Modifier.padding(16.dp), // Adds section padding
                        style = MaterialTheme.typography.titleMedium // Sets section style
                    )
                    NavigationDrawerItem(
                        label = { Text("Item 1") }, // Displays item text
                        selected = false, // Indicates selection state
                        onClick = { /* Handle click */ } // *Required: Handles item click
                    )
                    NavigationDrawerItem(
                        label = { Text("Item 2") }, // Displays item text
                        selected = false, // Indicates selection state
                        onClick = { /* Handle click */ } // *Required: Handles item click
                    )
                    HorizontalDivider(modifier = Modifier.padding(vertical = 8.dp)) // Separates sections
                    Text(
                        "Section 2",
                        modifier = Modifier.padding(16.dp), // Adds section padding
                        style = MaterialTheme.typography.titleMedium // Sets section style
                    )
                    NavigationDrawerItem(
                        label = { Text("Settings") }, // Displays item text
                        selected = false, // Indicates selection state
                        icon = { Icon(Icons.Outlined.Settings, contentDescription = null) }, // Adds item icon
                        badge = { Text("20") }, // Adds badge
                        onClick = { /* Handle click */ } // *Required: Handles item click
                    )
                    NavigationDrawerItem(
                        label = { Text("Help and feedback") }, // Displays item text
                        selected = false, // Indicates selection state
                        icon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) }, // Adds item icon
                        onClick = { /* Handle click */ } // *Required: Handles item click
                    )
                    Spacer(Modifier.height(12.dp)) // Adds spacing
                }
            }
        } // *Required: Defines drawer content
    ) {
        Text("Screen content") // *Required: Defines main screen content
    }
}
  

Use a Detailed Navigation Drawer when you want to show a menu with sections and icons.

Examples:

• Show categories in a blogging app
• Display account settings in a social media app
• Present features in a complex productivity app

---

Navigation Drawer Properties

Understand the key properties used in the navigation drawer examples.

Property	Usage
drawerContent*	Required: Defines the drawer’s content, like ModalDrawerSheet with items
content*	Required: Defines the main screen content, like Text
modifier	Customizes layout, like padding or scrolling
label	Sets the text for navigation items
selected	Indicates if a navigation item is selected
onClick	Handles clicks on navigation items
icon	Displays an icon for navigation items
badge	Shows a badge on navigation items, like a notification count
style	Sets text style for titles or sections, like titleLarge