New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Material Compose

BottomNavigation

Common

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

Bottom navigation image

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material:material:1.7.0-beta04")
}

Overloads

@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]s
@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]s

Code Example

BottomNavigationSample

@Composable
@Sampled
fun BottomNavigationSample() {
    var selectedItem by remember { mutableStateOf(0) }
    val items = listOf("Songs", "Artists", "Playlists")

    BottomNavigation(windowInsets = BottomNavigationDefaults.windowInsets) {
        items.forEachIndexed { index, item ->
            BottomNavigationItem(
                icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }
}