← Back to Material Compose
BottomNavigation
Component
in
Material
. Since 0.1.0-dev15
Overview
Examples
Community Notes
Video
<a href="https://material.io/components/bottom-navigation" class="external" target="_blank">Material Design bottom navigation</a>.
Bottom navigation bars allow movement between primary destinations in an app.
!Bottom navigation image(https://developer.android.com/images/reference/androidx/compose/material/bottom-navigation.png)
This particular overload provides ability to specify WindowInsets. Recommended value can be found in BottomNavigationDefaults.windowInsets.
BottomNavigation should contain multiple BottomNavigationItems, each representing a singular destination.
A simple example looks like:
Overloads
BottomNavigation
@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
| Name | Description |
|---|---|
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 |
BottomNavigation
@Composable
fun BottomNavigation(
modifier: Modifier = Modifier,
backgroundColor: Color = MaterialTheme.colors.primarySurface,
contentColor: Color = contentColorFor(backgroundColor),
elevation: Dp = BottomNavigationDefaults.Elevation,
content: @Composable RowScope.() -> Unit
)
Parameters
| Name | Description |
|---|---|
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 |
Previous Component← BottomDrawerLayout
Next ComponentBottomNavigationItem →