New Compose Multiplatform components arrived on Composables UICheck it out →

NavigationBar

Navigation bars offer a persistent and convenient way to switch between primary destinations in an app.

Navigation bar
image

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material3:material3:1.3.0-beta03")
}

Overloads

@Composable
fun NavigationBar(
    modifier: Modifier = Modifier,
    containerColor: Color = NavigationBarDefaults.containerColor,
    contentColor: Color = MaterialTheme.colorScheme.contentColorFor(containerColor),
    tonalElevation: Dp = NavigationBarDefaults.Elevation,
    windowInsets: WindowInsets = NavigationBarDefaults.windowInsets,
    content: @Composable RowScope.() -> Unit
)

Parameters

namedescription
modifierthe [Modifier] to be applied to this navigation bar
containerColorthe color used for the background of this navigation bar. Use [Color.Transparent] to have no color.
contentColorthe preferred color for content inside this navigation bar. Defaults to either the matching content color for [containerColor], or to the current [LocalContentColor] if [containerColor] is not a color from the theme.
tonalElevationwhen [containerColor] is [ColorScheme.surface], a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: [Surface].
windowInsetsa window insets of the navigation bar.
contentthe content of this navigation bar, typically 3-5 [NavigationBarItem]s

Code Example

@Composable
@Sampled
@Preview
fun NavigationBarSample() {
    var selectedItem by remember { mutableIntStateOf(0) }
    val items = listOf("Songs", "Artists", "Playlists")

    NavigationBar {
        items.forEachIndexed { index, item ->
            NavigationBarItem(
                icon = { Icon(Icons.Filled.Favorite, contentDescription = item) },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }
}