# SpatialWideNavigationRail

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/material3/ExperimentalMaterial3ExpressiveApi @https://developer.android.com/reference/kotlin/androidx/xr/compose/material3/ExperimentalMaterial3XrApi @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/xr/compose/material3/SpatialWideNavigationRail.composable#SpatialWideNavigationRail(androidx.compose.ui.Modifier,androidx.compose.material3.WideNavigationRailState,androidx.compose.material3.WideNavigationRailColors,kotlin.Function0,kotlin.Function0)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, state: https://developer.android.com/reference/kotlin/androidx/compose/material3/WideNavigationRailState, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/WideNavigationRailColors, header: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` XR-specific Material design wide navigation rail. |

## Functions

### SpatialWideNavigationRail

Artifact: [androidx.xr.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/xr-compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/xr/compose/material3/WideNavigationRail.kt+function:SpatialWideNavigationRail) Added in [1.0.0-alpha17](https://developer.android.com/jetpack/androidx/releases/xr-compose-material3#1.0.0-alpha17)

```
@ExperimentalMaterial3ExpressiveApi
@ExperimentalMaterial3XrApi
@Composable
fun SpatialWideNavigationRail(
    modifier: Modifier = Modifier,
    state: WideNavigationRailState = rememberWideNavigationRailState(),
    colors: WideNavigationRailColors = WideNavigationRailDefaults.colors(),
    header: (@Composable () -> Unit)? = null,
    content: @Composable () -> Unit
): Unit
```

XR-specific Material design wide navigation rail.

Wide navigation rails provide access to primary destinations in apps when using tablet and desktop screens.

The wide navigation rail should be used to display multiple `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)`s, each representing a singular app destination, and, optionally, a header containing a menu button, a `https://developer.android.com/reference/kotlin/androidx/compose/material3/FloatingActionButton.composable#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material3.FloatingActionButtonElevation,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)`, and/or a logo. Each destination is typically represented by an icon and a text label.

The `https://developer.android.com/reference/kotlin/androidx/xr/compose/material3/SpatialWideNavigationRail.composable#SpatialWideNavigationRail(androidx.compose.ui.Modifier,androidx.compose.material3.WideNavigationRailState,androidx.compose.material3.WideNavigationRailColors,kotlin.Function0,kotlin.Function0)` is collapsed by default, but it also supports being expanded via a `https://developer.android.com/reference/kotlin/androidx/compose/material3/WideNavigationRailState`. When collapsed, the rail should display three to seven navigation items.

See `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)` for configuration specific to each item, and not the overall `https://developer.android.com/reference/kotlin/androidx/xr/compose/material3/SpatialWideNavigationRail.composable#SpatialWideNavigationRail(androidx.compose.ui.Modifier,androidx.compose.material3.WideNavigationRailState,androidx.compose.material3.WideNavigationRailColors,kotlin.Function0,kotlin.Function0)` component.

| Parameters |
|---|---|
| `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 wide navigation rail |
| `state: https://developer.android.com/reference/kotlin/androidx/compose/material3/WideNavigationRailState = rememberWideNavigationRailState()` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/WideNavigationRailState` of this wide navigation rail |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/WideNavigationRailColors = WideNavigationRailDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/WideNavigationRailColors` that will be used to resolve the colors used for this wide navigation rail. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/WideNavigationRailDefaults#colors()` |
| `header: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | optional header that may hold a `https://developer.android.com/reference/kotlin/androidx/compose/material3/FloatingActionButton.composable#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material3.FloatingActionButtonElevation,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` or a logo |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the content of this wide navigation rail, typically `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)`s |