Material 3 Navigation Bar in Jetpack Compose

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

Explore Navigation Bar Style

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

Standard Navigation Bar

Shows a bar for switching between app destinations.

@Composable
fun NavigationBarExample(modifier: Modifier = Modifier) {
    // Creates a navigation bar 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
    NavigationBar(
        modifier = modifier, // Customizes bar layout
        windowInsets = NavigationBarDefaults.windowInsets // Sets window insets
    ) {
        destinations.forEachIndexed { index, destination ->
            NavigationBarItem(
                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 Bar when you want to switch between app destinations.

Examples:

• Switch between tabs in a music app
• Navigate between sections in a news app
• Access main screens in a social media app

---

Navigation Bar Properties

Understand the key properties used in the navigation bar 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 NavigationBarItem
selected	Highlights the currently selected item
label	Displays text below each navigation item
contentDescription	Describes icons for accessibility
modifier	Customizes the navigation bar layout
windowInsets	Adjusts the bar for system insets (e.g., status bar)