<h2 id="navigationbar-modifier-containercolor-contentcolor-tonalelevation-content">NavigationBar</h2>

<div class='sourceset sourceset-android'>Android</div>

```kotlin
@ExperimentalMaterial3XrApi
@Composable
public fun NavigationBar(
    modifier: Modifier = Modifier,
    containerColor: Color = NavigationBarDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = NavigationBarDefaults.Elevation,
    content: @Composable RowScope.() -> Unit,
)
```

#### Parameters

| | |
| --- | --- |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/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](/jetpack-compose/androidx.compose.material/material/properties/LocalContentColor) if `containerColor` is not a color from the theme. |
| tonalElevation | when `containerColor` is [ColorScheme.surface](/jetpack-compose/androidx.compose.material3/material3/classes/ColorScheme), 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](/jetpack-compose/androidx.compose.material/material/components/Surface). |
| content | the content of this navigation bar, typically 3-5 [NavigationBarItem](/jetpack-compose/androidx.compose.material3/material3/components/NavigationBarItem)s |