Skip to content
Navigation

Navigation Bar

Bottom bar with three to five destinations

A navigation bar lets people switch between top-level destinations from the bottom of the screen. Each item carries an icon and a label, and exactly one is selected at a time.

Navigation Bar demos rendered in Compose Playground
Pixel-accurate preview · light theme

Examples

01

Four destinations

Tap an item to move the selection.

Kotlin
var selected by remember { mutableIntStateOf(0) }
NavigationBar {
    NavigationBarItem(
        selected = selected == 0,
        onClick = { selected = 0 },
        icon = { Icon(Icons.Filled.Home, "Home") },
        label = { Text("Home") }
    )
    // Search, Favorites, Profile ...
}