<div class='type'>Composable Component</div>



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

<img loading='lazy' class='hero-img' alt='Navigation rail image' src='/static/images/material3/navigation-rail.png'>

<a id='references'></a>



<h2 id="navigationrail-modifier-containercolor-contentcolor-header-windowinsets-content">NavigationRail</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun NavigationRail(
    modifier: Modifier = Modifier,
    containerColor: Color = NavigationRailDefaults.ContainerColor,
    contentColor: Color = contentColorFor(containerColor),
    header: @Composable (ColumnScope.() -> Unit)? = null,
    windowInsets: WindowInsets = NavigationRailDefaults.windowInsets,
    content: @Composable ColumnScope.() -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| modifier | the `Modifier` to be applied to this navigation rail |
| containerColor | the color used for the background of this navigation rail. Use `Color.Transparent` to have no color. |
| contentColor | the preferred color for content inside this navigation rail. Defaults to either the matching content color for `containerColor`, or to the current `LocalContentColor` if `containerColor` is not a color from the theme. |
| header | optional header that may hold a `FloatingActionButton` or a logo |
| windowInsets | a window insets of the navigation rail. |
| content | the content of this navigation rail, typically 3-7 `NavigationRailItem`s |