Material 3 Navigation Rail in Jetpack Compose

Get started with Material 3 navigation rail in Jetpack Compose to create user-friendly interfaces for switching between app destinations on large screens.

Explore Navigation Rail Style

Learn to implement a Material 3 navigation rail for switching between app destinations.

Standard Navigation Rail

Shows a vertical bar for switching between app destinations.

@Composable
fun NavigationRailExample(modifier: Modifier = Modifier) {
    // Creates a navigation rail with selectable destinations
    val destinations = remember {
        listOf(
            Destination("Songs", Icons.Filled.MusicNote, "Songs screen"),
            Destination("Albums", Icons.Filled.Album, "Albums screen"),
            Destination("Playlists", Icons.Filled.PlaylistPlay, "Playlists screen")
        )
    }
    var selectedDestination by remember { mutableIntStateOf(0) } // Tracks selected item
    NavigationRail(
        modifier = modifier.padding(8.dp) // Customizes rail layout
    ) {
        destinations.forEachIndexed { index, destination ->
            NavigationRailItem(
                selected = selectedDestination == index, // Highlights selected item
                onClick = { selectedDestination = index }, // *Required: Handles item click
                icon = {
                    Icon(
                        destination.icon, // *Required: Displays destination icon
                        contentDescription = destination.contentDescription // Describes icon for accessibility
                    )
                },
                label = { Text(destination.label) } // Displays destination label
            )
        }
    }
}

// Data class for destinations
data class Destination(
    val label: String,
    val icon: ImageVector,
    val contentDescription: String
)
  

Use a Standard Navigation Rail when you want to switch between app destinations.

Examples:

• Switch between sections in a tablet music app
• Navigate between tabs in a desktop news app
• Access main screens in a large-screen productivity app

---

Navigation Rail Properties

Understand the key properties used in the navigation rail example.

Property	Usage
onClick*	Required: Handles click events for each navigation item
icon*	Required: Displays an icon for each navigation item
content*	Required: Defines navigation items using NavigationRailItem
selected	Highlights the currently selected item
label	Displays text below each navigation item
contentDescription	Describes icons for accessibility
modifier	Customizes the navigation rail layout, like padding