BottomNavigationItem

Composable Component

The recommended configuration for a BottomNavigationItem depends on how many items there are inside a BottomNavigation:

Three destinations: Display icons and text labels for all destinations.
Four destinations: Active destinations display an icon and text label. Inactive destinations display icons, and text labels are recommended.
Five destinations: Active destinations display an icon and text label. Inactive destinations use icons, and use text labels if space permits.

Common

@Composable
fun RowScope.BottomNavigationItem(
    selected: Boolean,
    onClick: () -> Unit,
    icon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    label: @Composable (() -> Unit)? = null,
    alwaysShowLabel: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    selectedContentColor: Color = LocalContentColor.current,
    unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium),
)

Parameters


selected	whether this item is selected
onClick	the callback to be invoked when this item is selected
icon	icon for this item, typically this will be an `Icon`
modifier	optional `Modifier` for this item
enabled	controls the enabled state of this item. When `false`, this item will not be clickable and will appear disabled to accessibility services.
label	optional text label for this item
alwaysShowLabel	whether to always show the label for this item. If false, the label will only be shown when this item is selected.
interactionSource	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this item. You can use this to change the item's appearance or preview the item in different states. Note that if `null` is provided, interactions will still happen internally.
selectedContentColor	the color of the text label and icon when this item is selected, and the color of the ripple.
unselectedContentColor	the color of the text label and icon when this item is not selected

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled