State of Compose 2023 results are in! Click here to learn more

← Back to Material Compose

BottomNavigation

Component
in
Material
. Since 0.1.0-dev15

Overview

Code Examples

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

NameDescription
windowInsetsa window insets that bottom navigation will respect.
modifieroptional Modifier for this BottomNavigation
backgroundColorThe background color for this BottomNavigation
contentColorThe 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.
elevationelevation for this BottomNavigation
contentdestinations 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

NameDescription
modifieroptional Modifier for this BottomNavigation
backgroundColorThe background color for this BottomNavigation
contentColorThe 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.
elevationelevation for this BottomNavigation
contentdestinations inside this BottomNavigation, this should contain multiple BottomNavigationItem