# ShortNavigationBarItem

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/material3/ShortNavigationBarItem.composable#ShortNavigationBarItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.NavigationItemIconPosition,androidx.compose.material3.NavigationItemColors,androidx.compose.foundation.interaction.MutableInteractionSource)( 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, label: (@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, iconPosition: https://developer.android.com/reference/kotlin/androidx/compose/material3/NavigationItemIconPosition, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/NavigationItemColors, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? )` Material Design short navigation bar item. | Cmn |

## Functions

### ShortNavigationBarItem

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/ShortNavigationBar.kt+function:ShortNavigationBarItem)

```
@Composable
fun ShortNavigationBarItem(
    selected: Boolean,
    onClick: () -> Unit,
    icon: @Composable () -> Unit,
    label: (@Composable () -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    iconPosition: NavigationItemIconPosition = NavigationItemIconPosition.Top,
    colors: NavigationItemColors = ShortNavigationBarItemDefaults.colors(),
    interactionSource: MutableInteractionSource? = null
): Unit
```

Material Design short navigation bar item.

Short navigation bars offer a persistent and convenient way to switch between primary destinations in an app.

It's recommend for navigation items to always have a text label. An `https://developer.android.com/reference/kotlin/androidx/compose/material3/ShortNavigationBarItem.composable#ShortNavigationBarItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.NavigationItemIconPosition,androidx.compose.material3.NavigationItemColors,androidx.compose.foundation.interaction.MutableInteractionSource)` always displays labels (if they exist) when selected and unselected.

The `https://developer.android.com/reference/kotlin/androidx/compose/material3/ShortNavigationBarItem.composable#ShortNavigationBarItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.NavigationItemIconPosition,androidx.compose.material3.NavigationItemColors,androidx.compose.foundation.interaction.MutableInteractionSource)` supports two different icon positions, top and start, which is controlled by the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ShortNavigationBarItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.NavigationItemIconPosition,androidx.compose.material3.NavigationItemColors,androidx.compose.foundation.interaction.MutableInteractionSource)` param:

- If the icon position is `https://developer.android.com/reference/kotlin/androidx/compose/material3/NavigationItemIconPosition#Top()` the icon will be displayed above the label. This configuration is recommended for short navigation bars used in small width screens, like a phone in portrait mode.

- If the icon position is `https://developer.android.com/reference/kotlin/androidx/compose/material3/NavigationItemIconPosition#Start()` the icon will be displayed to the start of the label. This configuration is recommended for short navigation bars used in medium width screens, like a phone in landscape mode.

| 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` | called when this item is clicked |
| `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 an `https://developer.android.com/reference/kotlin/androidx/compose/material3/Icon.composable#Icon(androidx.compose.ui.graphics.vector.ImageVector,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color)` |
| `label: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?` | text label for this item |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to 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 component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| `iconPosition: https://developer.android.com/reference/kotlin/androidx/compose/material3/NavigationItemIconPosition = NavigationItemIconPosition.Top` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/NavigationItemIconPosition` for the icon |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/NavigationItemColors = ShortNavigationBarItemDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/NavigationItemColors` that will be used to resolve the colors used for this item in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/ShortNavigationBarItemDefaults#colors()` |
| `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. |