<h2 id="widenavigationrail-modifier-state-colors-header-content">WideNavigationRail</h2>

<div class='sourceset sourceset-android'>Android</div>

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

#### Parameters

| | |
| --- | --- |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this wide navigation rail |
| state | the [WideNavigationRailState](/jetpack-compose/androidx.compose.material3/material3/interfaces/WideNavigationRailState) of this wide navigation rail |
| colors | [WideNavigationRailColors](/jetpack-compose/androidx.compose.material3/material3/classes/WideNavigationRailColors) that will be used to resolve the colors used for this wide navigation rail. See [WideNavigationRailDefaults.colors](/jetpack-compose/androidx.compose.material3/material3/objects/WideNavigationRailDefaults) |
| header | optional header that may hold a [FloatingActionButton](/jetpack-compose/androidx.compose.material/material/components/FloatingActionButton) or a logo |
| content | the content of this wide navigation rail, typically [WideNavigationRailItem](/jetpack-compose/androidx.compose.material3/material3/components/WideNavigationRailItem)s |