Jetpack Compose NavigationRail in Material 3 Compose

<a href="https://m3.material.io/components/navigation-rail/overview" class="external" target="_blank">Material Design bottom navigation rail</a>.

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

!Navigation rail image(https://developer.android.com/images/reference/androidx/compose/material3/navigation-rail.png)

The navigation rail should be used to display three to seven app destinations and, optionally, a FloatingActionButton or a logo header. Each destination is typically represented by an icon and an optional text label.

NavigationRail should contain multiple NavigationRailItems, each representing a singular destination.

A simple example looks like:

Overloads

NavigationRail

@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

Name	Description
`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

← Back to Material 3 Compose

NavigationRail

Overloads

NavigationRail

Parameters