Compose Multiplatform Material3/androidx.compose.material3/NavigationRail

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)

Material Design bottom navigation rail.

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

Navigation rail image

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:

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 NavigationRailItems

Samples

androidx.compose.material3.samples.NavigationRailSample