by @alexstyl
✉️ Leave your feedback

← Back to Compose Multiplatform

NavigationBar

Component
in
Compose Multiplatform
. Since 1.3.0-beta01

Overview

Examples

Community Notes

<a href="https://m3.material.io/components/navigation-bar/overview" 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(https://developer.android.com/images/reference/androidx/compose/material3/navigation-bar.png)

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

A simple example looks like:

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
Previous Component← MultiChoiceSegmentedButtonRow
Next ComponentNavigationBarItem →