NavigationBar

Functions summary

Unit

@Composable
NavigationBar(
    modifier: Modifier,
    containerColor: Color,
    contentColor: Color,
    tonalElevation: Dp,
    windowInsets: WindowInsets,
    content: @Composable RowScope.() -> Unit
)

Material Design bottom navigation bar

Cmn

Functions

NavigationBar

Cmn

Artifact: androidx.compose.material3:material3

View Source

@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
): Unit

Material Design bottom navigation bar

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

Navigation bar
image

NavigationBar should contain three to five NavigationBarItems, each representing a singular destination.

A simple example looks like:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Star
import androidx.compose.material.icons.outlined.FavoriteBorder
import androidx.compose.material.icons.outlined.Home
import androidx.compose.material.icons.outlined.StarBorder
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember

var selectedItem by remember { mutableIntStateOf(0) }
val items = listOf("Songs", "Artists", "Playlists")
val selectedIcons = listOf(Icons.Filled.Home, Icons.Filled.Favorite, Icons.Filled.Star)
val unselectedIcons =
    listOf(Icons.Outlined.Home, Icons.Outlined.FavoriteBorder, Icons.Outlined.StarBorder)

NavigationBar {
    items.forEachIndexed { index, item ->
        NavigationBarItem(
            icon = {
                Icon(
                    if (selectedItem == index) selectedIcons[index] else unselectedIcons[index],
                    contentDescription = item,
                )
            },
            label = { Text(item) },
            selected = selectedItem == index,
            onClick = { selectedItem = index },
        )
    }
}

See NavigationBarItem for configuration specific to each item, and not the overall NavigationBar component.

Parameters
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this navigation bar
`containerColor: Color = NavigationBarDefaults.containerColor`	the color used for the background of this navigation bar. Use `Color.Transparent` to have no color.
`contentColor: Color = MaterialTheme.colorScheme.contentColorFor(containerColor)`	the 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.
`tonalElevation: Dp = NavigationBarDefaults.Elevation`	when `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`.
`windowInsets: WindowInsets = NavigationBarDefaults.windowInsets`	a window insets of the navigation bar.
`content: @Composable RowScope.() -> Unit`	the content of this navigation bar, typically 3-5 `NavigationBarItem`s