📧 Stay updated with the latest tools, products and offers from Composables! Subscribe

BottomNavigation

Common

Component in Material Compose

Material Design bottom navigation

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

Bottom navigation
image

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material:material:1.9.0-alpha03")
}

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
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 }
            )
        }
    }
}
by @alexstyl