NavigationRail

Common/AllAndroid/JVM

Functions summary

Unit	@Composable NavigationRail(     modifier: Modifier,     backgroundColor: Color,     contentColor: Color,     elevation: Dp,     header: (@Composable ColumnScope.() -> Unit)?,     content: @Composable ColumnScope.() -> Unit ) Material Design navigation rail	Cmn
Unit	@Composable NavigationRail(     windowInsets: WindowInsets,     modifier: Modifier,     backgroundColor: Color,     contentColor: Color,     elevation: Dp,     header: (@Composable ColumnScope.() -> Unit)?,     content: @Composable ColumnScope.() -> Unit ) Material Design navigation rail	Cmn

Functions

NavigationRail

Cmn

Artifact: androidx.compose.material:material

View Source

@Composable
fun NavigationRail(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = NavigationRailDefaults.Elevation,
    header: (@Composable ColumnScope.() -> Unit)? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

Material Design navigation rail

A Navigation Rail is a side navigation component that allows movement between primary destinations in an app. A navigation rail should be used to display three to seven app destinations and, optionally, a FloatingActionButton or a logo inside 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.Icon
import androidx.compose.material.NavigationRail
import androidx.compose.material.NavigationRailDefaults
import androidx.compose.material.NavigationRailItem
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Settings
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var selectedItem by remember { mutableStateOf(0) }
val items = listOf("Home", "Search", "Settings")
val icons = listOf(Icons.Filled.Home, Icons.Filled.Search, Icons.Filled.Settings)
NavigationRail(windowInsets = NavigationRailDefaults.windowInsets) {
    items.forEachIndexed { index, item ->
        NavigationRailItem(
            icon = { Icon(icons[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.

For more information, see Navigation Rail

Parameters
modifier: Modifier = Modifier	optional Modifier for this NavigationRail
backgroundColor: Color = MaterialTheme.colors.surface	The background color for this NavigationRail
contentColor: Color = contentColorFor(backgroundColor)	The preferred content color provided by this NavigationRail to its children. Defaults to either the matching content color for backgroundColor, or if backgroundColor is not a color from the theme, this will keep the same value set above this NavigationRail.
elevation: Dp = NavigationRailDefaults.Elevation	elevation for this NavigationRail
header: (@Composable ColumnScope.() -> Unit)? = null	an optional header that may hold a FloatingActionButton or a logo
content: @Composable ColumnScope.() -> Unit	destinations inside this NavigationRail, this should contain multiple NavigationRailItems

NavigationRail

Cmn

Artifact: androidx.compose.material:material

View Source

@Composable
fun NavigationRail(
    windowInsets: WindowInsets,
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = NavigationRailDefaults.Elevation,
    header: (@Composable ColumnScope.() -> Unit)? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

Material Design navigation rail

A Navigation Rail is a side navigation component that allows movement between primary destinations in an app. A navigation rail should be used to display three to seven app destinations and, optionally, a FloatingActionButton or a logo inside header. Each destination is typically represented by an icon and an optional text label.

This particular overload provides ability to specify WindowInsets. Recommended value can be found in NavigationRailDefaults.windowInsets.

NavigationRail should contain multiple NavigationRailItems, each representing a singular destination.

A simple example looks like:

import androidx.compose.material.Icon
import androidx.compose.material.NavigationRail
import androidx.compose.material.NavigationRailDefaults
import androidx.compose.material.NavigationRailItem
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Settings
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var selectedItem by remember { mutableStateOf(0) }
val items = listOf("Home", "Search", "Settings")
val icons = listOf(Icons.Filled.Home, Icons.Filled.Search, Icons.Filled.Settings)
NavigationRail(windowInsets = NavigationRailDefaults.windowInsets) {
    items.forEachIndexed { index, item ->
        NavigationRailItem(
            icon = { Icon(icons[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.

For more information, see Navigation Rail

Parameters
windowInsets: WindowInsets	a window insets that navigation rail will respect
modifier: Modifier = Modifier	optional Modifier for this NavigationRail
backgroundColor: Color = MaterialTheme.colors.surface	The background color for this NavigationRail
contentColor: Color = contentColorFor(backgroundColor)	The preferred content color provided by this NavigationRail to its children. Defaults to either the matching content color for backgroundColor, or if backgroundColor is not a color from the theme, this will keep the same value set above this NavigationRail.
elevation: Dp = NavigationRailDefaults.Elevation	elevation for this NavigationRail
header: (@Composable ColumnScope.() -> Unit)? = null	an optional header that may hold a FloatingActionButton or a logo
content: @Composable ColumnScope.() -> Unit	destinations inside this NavigationRail, this should contain multiple NavigationRailItems