by @alexstyl
✉️ Leave your feedback

← Back to Compose Multiplatform


Compose Multiplatform
. Since 1.3.0-beta01



Community Notes

<a href="" class="external" target="_blank">Material Design bottom navigation bar</a>.

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:


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


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
Previous ComponentMultiChoiceSegmentedButtonRow
Next ComponentNavigationBarItem