Compose Multiplatform Material3/androidx.compose.material3/WideNavigationRail

WideNavigationRail

@Composable
fun WideNavigationRail(modifier: Modifier = Modifier, state: WideNavigationRailState = rememberWideNavigationRailState(), shape: Shape = WideNavigationRailDefaults.shape, colors: WideNavigationRailColors = WideNavigationRailDefaults.colors(), header: @Composable () -> Unit? = null, windowInsets: WindowInsets = WideNavigationRailDefaults.windowInsets, arrangement: Arrangement.Vertical = WideNavigationRailDefaults.arrangement, content: @Composable () -> Unit)

Material design wide navigation rail.

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

Wide navigation rail collapsed image

Wide navigation rail expanded image

The wide navigation rail should be used to display multiple WideNavigationRailItems, each representing a singular app destination, and, optionally, a header containing a menu button, a FloatingActionButton, and/or a logo. Each destination is typically represented by an icon and a text label.

The WideNavigationRail is collapsed by default, but it also supports being expanded via a WideNavigationRailState. When collapsed, the rail should display three to seven navigation items. A simple example looks like:

Parameters

modifier

the Modifier to be applied to this wide navigation rail

state

the WideNavigationRailState of this wide navigation rail

shape

defines the shape of this wide navigation rail's container.

colors

WideNavigationRailColors that will be used to resolve the colors used for this wide navigation rail. See WideNavigationRailDefaults.colors

header

optional header that may hold a FloatingActionButton or a logo

windowInsets

a window insets of the wide navigation rail

arrangement

the Arrangement.Vertical of this wide navigation rail for its content. Note that if there's a header present, the items will be arranged on the remaining space below it, except for the center arrangement which considers the entire height of the container

content

the content of this wide navigation rail, typically WideNavigationRailItems

Samples

androidx.compose.material3.samples.WideNavigationRailCollapsedSampleandroidx.compose.material3.samples.WideNavigationRailExpandedSampleandroidx.compose.material3.samples.WideNavigationRailResponsiveSample