New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Material 3 Compose

NavigationRail

Common

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

Navigation rail image

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material3:material3:1.3.0-beta04")
}

Overloads

@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

namedescription
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]s

Code Example

@Composable
@Sampled
@Preview
fun NavigationRailSample() {
    var selectedItem by remember { mutableIntStateOf(0) }
    val items = listOf("Home", "Search", "Settings")
    val icons = listOf(Icons.Filled.Home, Icons.Filled.Search, Icons.Filled.Settings)
    NavigationRail {
        items.forEachIndexed { index, item ->
            NavigationRailItem(
                icon = { Icon(icons[index], contentDescription = item) },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }
}