{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

NavigationRailKt

public final class NavigationRailKt


Summary

Public methods

static final void
@Composable
NavigationRail(
    @NonNull Modifier modifier,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @Composable @ExtensionFunctionType Function1<@NonNull ColumnScopeUnit> header,
    @NonNull WindowInsets windowInsets,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Material Design bottom navigation rail.

static final void
@Composable
NavigationRailItem(
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> icon,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> label,
    boolean alwaysShowLabel,
    @NonNull NavigationRailItemColors colors,
    @NonNull MutableInteractionSource interactionSource
)

Material Design navigation rail item.

Public methods

@Composable
public static final void NavigationRail(
    @NonNull Modifier modifier,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @Composable @ExtensionFunctionType Function1<@NonNull ColumnScopeUnit> header,
    @NonNull WindowInsets windowInsets,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

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.Home
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Settings
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 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 }
        )
    }
}

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

Parameters
@NonNull Modifier modifier

the Modifier to be applied to this navigation rail

@NonNull Color containerColor

the color used for the background of this navigation rail. Use Color.Transparent to have no color.

@NonNull 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.

@Composable @ExtensionFunctionType Function1<@NonNull ColumnScopeUnit> header

optional header that may hold a FloatingActionButton or a logo

@NonNull WindowInsets windowInsets

a window insets of the navigation rail.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content

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

@Composable
public static final void NavigationRailItem(
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> icon,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> label,
    boolean alwaysShowLabel,
    @NonNull NavigationRailItemColors colors,
    @NonNull MutableInteractionSource interactionSource
)

Material Design navigation rail item.

A NavigationRailItem represents a destination within a NavigationRail.

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

The text label is always shown (if it exists) when selected. Showing text labels if not selected is controlled by alwaysShowLabel.

Parameters
boolean selected

whether this item is selected

@NonNull Function0<Unit> onClick

called when this item is clicked

@Composable @NonNull Function0<Unit> icon

icon for this item, typically an Icon

@NonNull Modifier modifier

the Modifier to be applied to this item

boolean enabled

controls the enabled state of this item. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@Composable Function0<Unit> label

optional text label for this item

boolean alwaysShowLabel

whether to always show the label for this item. If false, the label will only be shown when this item is selected.

@NonNull NavigationRailItemColors colors

NavigationRailItemColors that will be used to resolve the colors used for this item in different states. See NavigationRailItemDefaults.colors.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this item. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this item in different states.