# WideNavigationRailItem

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/WideNavigationRailItem.composable#WideNavigationRailItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.NavigationItemIconPosition,androidx.compose.material3.NavigationItemColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.layout.PaddingValues)( 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)?, railExpanded: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/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?, indicatorPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues )` Material Design wide navigation rail item. | Cmn |

## Functions

### WideNavigationRailItem

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/WideNavigationRail.kt+function:WideNavigationRailItem)

```
@Composable
fun WideNavigationRailItem(
    selected: Boolean,
    onClick: () -> Unit,
    icon: @Composable () -> Unit,
    label: (@Composable () -> Unit)?,
    railExpanded: Boolean,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    iconPosition: NavigationItemIconPosition = WideNavigationRailItemDefaults.iconPositionFor(railExpanded),
    colors: NavigationItemColors = WideNavigationRailItemDefaults.colors(),
    interactionSource: MutableInteractionSource? = null,
    indicatorPadding: PaddingValues = WideNavigationRailItemDefaults.indicatorPadding(railExpanded = railExpanded)
): Unit
```

Material Design wide navigation rail item.

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

The `https://developer.android.com/reference/kotlin/androidx/compose/material3/WideNavigationRailItem.composable#WideNavigationRailItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.NavigationItemIconPosition,androidx.compose.material3.NavigationItemColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.layout.PaddingValues)` supports two different icon positions, top and start, which is controlled by the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#WideNavigationRailItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.NavigationItemIconPosition,androidx.compose.material3.NavigationItemColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.layout.PaddingValues)` 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 should be used with collapsed wide navigation rails.

- 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 should be used with expanded wide navigation rails.

However, if an animated item is desired, the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#WideNavigationRailItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.NavigationItemIconPosition,androidx.compose.material3.NavigationItemColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.layout.PaddingValues)` can be controlled via the expanded value of the associated `https://developer.android.com/reference/kotlin/androidx/compose/material3/WideNavigationRail.composable#WideNavigationRail(androidx.compose.ui.Modifier,androidx.compose.material3.WideNavigationRailState,androidx.compose.ui.graphics.Shape,androidx.compose.material3.WideNavigationRailColors,kotlin.Function0,androidx.compose.foundation.layout.WindowInsets,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.PaddingValues,kotlin.Function0)` or `https://developer.android.com/reference/kotlin/androidx/compose/material3/ModalWideNavigationRail.composable#ModalWideNavigationRail(androidx.compose.ui.Modifier,androidx.compose.material3.WideNavigationRailState,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Shape,androidx.compose.material3.WideNavigationRailColors,kotlin.Function0,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.material3.ModalWideNavigationRailProperties,androidx.compose.foundation.layout.PaddingValues,kotlin.Function0)`. By default, it'll use the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#WideNavigationRailItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.NavigationItemIconPosition,androidx.compose.material3.NavigationItemColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.layout.PaddingValues)` to follow the configuration described above.

| 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 |
| `railExpanded: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether the associated `https://developer.android.com/reference/kotlin/androidx/compose/material3/WideNavigationRail.composable#WideNavigationRail(androidx.compose.ui.Modifier,androidx.compose.material3.WideNavigationRailState,androidx.compose.ui.graphics.Shape,androidx.compose.material3.WideNavigationRailColors,kotlin.Function0,androidx.compose.foundation.layout.WindowInsets,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.PaddingValues,kotlin.Function0)` is expanded or collapsed |
| `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 = WideNavigationRailItemDefaults.iconPositionFor(railExpanded)` | 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 = WideNavigationRailItemDefaults.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/WideNavigationRailItemDefaults#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. |
| `indicatorPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = WideNavigationRailItemDefaults.indicatorPadding(railExpanded = railExpanded)` | the spacing values to apply internally between the indicator and the indicator's content, if you need different paddings during expanded and collapsed states, use `https://developer.android.com/reference/kotlin/androidx/compose/material3/WideNavigationRailItemDefaults#indicatorPadding(kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.PaddingValues)` to correctly handle animations. |