by @alexstyl
✉️ Leave your feedback

← Back to Material 3 Compose


Material 3
. Since 1.0.0



Community Notes


<a href="" 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(

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:


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


modifierthe Modifier to be applied to this navigation rail
containerColorthe color used for the background of this navigation rail. Use Color.Transparent to have no color.
contentColorthe 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.
headeroptional header that may hold a FloatingActionButton or a logo
windowInsetsa window insets of the navigation rail.
contentthe content of this navigation rail, typically 3-7 NavigationRailItem
Previous ComponentNavigationDrawerItem
Next ComponentNavigationRailItem