BottomNavigationItem

Functions summary

Unit
@Composable
RowScope.BottomNavigationItem(
    selected: Boolean,
    onClick: () -> Unit,
    icon: @Composable () -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    label: (@Composable () -> Unit)?,
    alwaysShowLabel: Boolean,
    interactionSource: MutableInteractionSource?,
    selectedContentColor: Color,
    unselectedContentColor: Color
)

Material Design bottom navigation
Cmn

Functions

RowScope.BottomNavigationItem

Cmn 
@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)
): Unit

Material Design bottom navigation

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.

A BottomNavigationItem always shows text labels (if it exists) when selected. Showing text labels if not selected is controlled by alwaysShowLabel.

Parameters
selected: Boolean

whether this item is selected
onClick: () -> Unit

the callback to be invoked when this item is selected
icon: @Composable () -> Unit

icon for this item, typically this will be an Icon
modifier: Modifier = Modifier

optional Modifier for this item
enabled: Boolean = true

controls the enabled state of this item. When false, this item will not be clickable and will appear disabled to accessibility services.
label: (@Composable () -> Unit)? = null

optional text label for this item
alwaysShowLabel: Boolean = true

whether to always show the label for this item. If false, the label will only be shown when this item is selected.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions 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: Color = LocalContentColor.current

the color of the text label and icon when this item is selected, and the color of the ripple.
unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium)

the color of the text label and icon when this item is not selected