<div class='type'>Composable Component</div>



Bottom navigation bars allow movement between primary destinations in an app.

<img loading='lazy' class='hero-img' alt='Bottom navigation image' src='/static/images/material/bottom-navigation.png'>

<a id='references'></a>



<h2 id="bottomnavigation-windowinsets-modifier-backgroundcolor-contentcolor-elevation-content">BottomNavigation</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun BottomNavigation(
    windowInsets: WindowInsets,
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = BottomNavigationDefaults.Elevation,
    content: @Composable RowScope.() -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| windowInsets | a window insets that bottom navigation will respect. |
| modifier | optional `Modifier` for this BottomNavigation |
| backgroundColor | The background color for this BottomNavigation |
| contentColor | The preferred content color provided by this BottomNavigation to its children. Defaults to either the matching content color for `backgroundColor`, or if `backgroundColor` is not a color from the theme, this will keep the same value set above this BottomNavigation. |
| elevation | elevation for this BottomNavigation |
| content | destinations inside this BottomNavigation, this should contain multiple `BottomNavigationItem`s |






<hr class="docs-overload-divider">


<h2 id="bottomnavigation-modifier-backgroundcolor-contentcolor-elevation-content">BottomNavigation</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun BottomNavigation(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = BottomNavigationDefaults.Elevation,
    content: @Composable RowScope.() -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| modifier | optional `Modifier` for this BottomNavigation |
| backgroundColor | The background color for this BottomNavigation |
| contentColor | The preferred content color provided by this BottomNavigation to its children. Defaults to either the matching content color for `backgroundColor`, or if `backgroundColor` is not a color from the theme, this will keep the same value set above this BottomNavigation. |
| elevation | elevation for this BottomNavigation |
| content | destinations inside this BottomNavigation, this should contain multiple `BottomNavigationItem`s |