Android Jetpack Compose - Implement Navigation Drawer

Last Updated : 07 Mar, 2025

Jetpack Compose is a new UI toolkit from Google used to create native Android UI. It speeds up and simplifies UI development using less code, Kotlin APIs, and powerful tools.

Prerequisites

Familiar with Kotlin and OOP Concepts
Basic understanding of Jetpack Compose

The navigation drawer is the most used feature provided by Android, and it is a UI panel that displays your app's primary navigation menu. It is also a crucial UI feature that delivers activities that users desire, such as changing user profiles, altering program settings, and so on. The implementation of the navigation drawer in Android Jetpack Compose has been covered in detail in this article.

When the user swipes a finger from the activity's left edge, the navigation menu appears. They may also locate it by touching the app symbol in the action bar from the home activity.

Step by Step Implementation

Step 1: Create a New Android Studio Project

To create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.

Step 2: Working with MainActivity.kt

Create 4 composables in MainActivity.kt with the name NavigationDrawerApp, DrawerContent, NavigationGraph, and ScreenContent.

NavigationDrawerApp : This composable is defines the main UI of the app where we define the Navigation Drawer, the top bar and the main screen.
DrawerContent : This composable defines the UI of the Drawer where it contains three drawer menus Home, Profile and Settings.
NavigationGraph : This composable defines the navigation routes by using NavHost to define 3 different screens. Each composable route (home, profile, settings) is mapped to a ScreenContent
ScreenContent : This composable defines the UI of the main screen which contains just a Text resembling the name of the screen.

MainActivity.kt:

Kotlin

@file:OptIn(ExperimentalMaterial3Api::class)

package com.geeksforgeeks.demo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.*
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.compose.*
import kotlinx.coroutines.launch
import com.geeksforgeeks.demo.ui.theme.DemoTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DemoTheme(dynamicColor = false, darkTheme = false) {
                Surface(color = Color.White) {
                    NavigationDrawerApp()
                }
            }
        }
    }
}

@Composable
fun NavigationDrawerApp() {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    val navController = rememberNavController()

    ModalNavigationDrawer(
        drawerContent = {
            DrawerContent(navController, drawerState)
        },
        drawerState = drawerState
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text(stringResource(R.string.app_name)) },
                    colors = TopAppBarDefaults.topAppBarColors(Color.White),
                    navigationIcon = {
                        IconButton(onClick = { scope.launch { drawerState.open() } }) {
                            Icon(Icons.Default.Menu, contentDescription = "Menu")
                        }
                    }
                )
            }
        ) { paddingValues ->
            Box(modifier = Modifier.padding(paddingValues)) {
                NavigationGraph(navController)
            }
        }
    }
}

@Composable
fun DrawerContent(
    navController: NavHostController,
    drawerState: DrawerState
) {
    ModalDrawerSheet {
        Spacer(modifier = Modifier.height(16.dp))

        val scope = rememberCoroutineScope()
        Column(
            modifier = Modifier.fillMaxSize().padding(16.dp)
        ) {
            listOf("Home", "Profile", "Settings").forEach { screen ->
                Text(
                    text = screen,
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier
                        .fillMaxWidth()
                        .clickable {
                            navController.navigate(screen.lowercase())
                            scope.launch { drawerState.close() }
                        }
                        .padding(12.dp)
                )
            }
        }
    }
}

@Composable
fun NavigationGraph(navController: NavHostController) {
    NavHost(navController, startDestination = "home") {
        composable("home") { ScreenContent("Home Screen") }
        composable("profile") { ScreenContent("Profile Screen") }
        composable("settings") { ScreenContent("Settings Screen") }
    }
}

@Composable
fun ScreenContent(text: String) {
    Box(
        modifier = Modifier.fillMaxSize().background(Color.White),
        contentAlignment = Alignment.Center) {
        Text(text = text, fontSize = 24.sp, fontWeight = FontWeight.Bold)
    }
}