# BottomNavigationItem

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.https://developer.android.com/reference/kotlin/androidx/compose/material/BottomNavigationItem.composable#(androidx.compose.foundation.layout.RowScope).BottomNavigationItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)( selected: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, icon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, label: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, alwaysShowLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, selectedContentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, unselectedContentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color )` [Material Design bottom navigation](https://material.io/components/bottom-navigation) | Cmn |

## Functions

### RowScope.BottomNavigationItem

Cmn Artifact: [androidx.compose.material:material](https://developer.android.com/jetpack/androidx/releases/compose-material) [View Source](https://cs.android.com/search?q=file:androidx/compose/material/BottomNavigation.kt+function:BottomNavigationItem) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.10.0)

```
@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](https://material.io/components/bottom-navigation)

The recommended configuration for a BottomNavigationItem depends on how many items there are inside a `https://developer.android.com/reference/kotlin/androidx/compose/material/BottomNavigation.composable#BottomNavigation(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,kotlin.Function1)`:

- 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 `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#(androidx.compose.foundation.layout.RowScope).BottomNavigationItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)`.

| Parameters |
|---|---|
| `selected: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether this item is selected |
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the callback to be invoked when this item is selected |
| `icon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | icon for this item, typically this will be an `https://developer.android.com/reference/kotlin/androidx/compose/material/Icon.composable#Icon(androidx.compose.ui.graphics.vector.ImageVector,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color)` |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | optional `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` for this item |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the enabled state of this item. When `false`, this item will not be clickable and will appear disabled to accessibility services. |
| `label: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | optional text label for this item |
| `alwaysShowLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether to always show the label for this item. If false, the label will only be shown when this item is selected. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/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: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = LocalContentColor.current` | the color of the text label and icon when this item is selected, and the color of the ripple. |
| `unselectedContentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = selectedContentColor.copy(alpha = ContentAlpha.medium)` | the color of the text label and icon when this item is not selected |