PermanentNavigationDrawer

Functions summary

Unit
@Composable
PermanentNavigationDrawer(
    drawerContent: @Composable () -> Unit,
    modifier: Modifier,
    content: @Composable () -> Unit
)

Material Design navigation permanent drawer
Cmn

Functions

PermanentNavigationDrawer

Cmn 
@Composable
fun PermanentNavigationDrawer(
    drawerContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
): Unit

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.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.Bookmarks
import androidx.compose.material.icons.filled.CalendarMonth
import androidx.compose.material.icons.filled.Dashboard
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Group
import androidx.compose.material.icons.filled.Headphones
import androidx.compose.material.icons.filled.Image
import androidx.compose.material.icons.filled.JoinFull
import androidx.compose.material.icons.filled.Keyboard
import androidx.compose.material.icons.filled.Laptop
import androidx.compose.material.icons.filled.Map
import androidx.compose.material.icons.filled.Navigation
import androidx.compose.material.icons.filled.Outbox
import androidx.compose.material.icons.filled.PushPin
import androidx.compose.material.icons.filled.QrCode
import androidx.compose.material.icons.filled.Radio
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.AccountCircle,
        Icons.Default.Bookmarks,
        Icons.Default.CalendarMonth,
        Icons.Default.Dashboard,
        Icons.Default.Email,
        Icons.Default.Favorite,
        Icons.Default.Group,
        Icons.Default.Headphones,
        Icons.Default.Image,
        Icons.Default.JoinFull,
        Icons.Default.Keyboard,
        Icons.Default.Laptop,
        Icons.Default.Map,
        Icons.Default.Navigation,
        Icons.Default.Outbox,
        Icons.Default.PushPin,
        Icons.Default.QrCode,
        Icons.Default.Radio,
    )
val selectedItem = remember { mutableStateOf(items[0]) }
PermanentNavigationDrawer(
    drawerContent = {
        PermanentDrawerSheet(Modifier.width(240.dp)) {
            Column(Modifier.verticalScroll(rememberScrollState())) {
                Spacer(Modifier.height(12.dp))
                items.forEach { item ->
                    NavigationDrawerItem(
                        icon = { Icon(item, contentDescription = null) },
                        label = { Text(item.name.substringAfterLast(".")) },
                        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
drawerContent: @Composable () -> Unit

content inside this drawer
modifier: Modifier = Modifier

the Modifier to be applied to this drawer
content: @Composable () -> Unit

content of the rest of the UI