NavigationRail

Functions summary

Unit
@Composable
NavigationRail(
    modifier: Modifier,
    containerColor: Color,
    contentColor: Color,
    header: (@Composable ColumnScope.() -> Unit)?,
    windowInsets: WindowInsets,
    content: @Composable ColumnScope.() -> Unit
)

Material Design bottom navigation rail
Cmn

Functions

Cmn 
@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
): 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:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Star
import androidx.compose.material.icons.outlined.FavoriteBorder
import androidx.compose.material.icons.outlined.Home
import androidx.compose.material.icons.outlined.StarBorder
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationRail
import androidx.compose.material3.NavigationRailItem
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember

var selectedItem by remember { mutableIntStateOf(0) }
val items = listOf("Home", "Search", "Settings")
val selectedIcons = listOf(Icons.Filled.Home, Icons.Filled.Favorite, Icons.Filled.Star)
val unselectedIcons =
    listOf(Icons.Outlined.Home, Icons.Outlined.FavoriteBorder, Icons.Outlined.StarBorder)
NavigationRail {
    items.forEachIndexed { index, item ->
        NavigationRailItem(
            icon = {
                Icon(
                    if (selectedItem == index) selectedIcons[index] else unselectedIcons[index],
                    contentDescription = item,
                )
            },
            label = { Text(item) },
            selected = selectedItem == index,
            onClick = { selectedItem = index },
        )
    }
}

See NavigationRailItem for configuration specific to each item, and not the overall NavigationRail component.

Parameters
modifier: Modifier = Modifier

the Modifier to be applied to this navigation rail
containerColor: Color = NavigationRailDefaults.ContainerColor

the color used for the background of this navigation rail. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(containerColor)

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: (@Composable ColumnScope.() -> Unit)? = null

optional header that may hold a FloatingActionButton or a logo
windowInsets: WindowInsets = NavigationRailDefaults.windowInsets

a window insets of the navigation rail.
content: @Composable ColumnScope.() -> Unit

the content of this navigation rail, typically 3-7 NavigationRailItems