NavigationRail
Common
Component in Material 3 Compose
Navigation rails provide access to primary destinations in apps when using tablet and desktop screens.
Last updated:
Installation
dependencies {
implementation("androidx.compose.material3:material3:1.3.0")
}
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
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]s |
Code Example
NavigationRailSample
@Preview
@Composable
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 }
)
}
}
}