← Compose Multiplatform Component in Material 3 Compose
NavigationBar
Common
Navigation bars offer a persistent and convenient way to switch between primary destinations in an app.
Last updated:
Installation
dependencies {
implementation("androidx.compose.material3:material3:1.3.0-beta04")
}
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
| name | description |
|---|---|
modifier | the [Modifier] to be applied to this navigation bar |
containerColor | the color used for the background of this navigation bar. Use [Color.Transparent] to have no color. |
contentColor | 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 | 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 | a window insets of the navigation bar. |
content | the content of this navigation bar, typically 3-5 [NavigationBarItem]s |
Code Example
NavigationBarSample
@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 }
)
}
}
}
