Compose Multiplatform Material3/androidx.compose.material3/ModalWideNavigationRail

ModalWideNavigationRail

@Composable
fun ModalWideNavigationRail(modifier: Modifier = Modifier, state: WideNavigationRailState = rememberWideNavigationRailState(), hideOnCollapse: Boolean = false, collapsedShape: Shape = WideNavigationRailDefaults.modalCollapsedShape, expandedShape: Shape = WideNavigationRailDefaults.modalExpandedShape, colors: WideNavigationRailColors = WideNavigationRailDefaults.colors(), header: @Composable () -> Unit? = null, expandedHeaderTopPadding: Dp = 0.dp, windowInsets: WindowInsets = WideNavigationRailDefaults.windowInsets, arrangement: Arrangement.Vertical = WideNavigationRailDefaults.arrangement, expandedProperties: ModalWideNavigationRailProperties = WideNavigationRailDefaults.ModalExpandedProperties, content: @Composable () -> Unit)

Material design modal wide navigation rail.

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

The modal 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 ModalWideNavigationRail when collapsed behaves like a collapsed WideNavigationRail. When expanded, the modal wide navigation rail blocks interaction with the rest of an app’s content with a scrim. It is elevated above the app’s UI and doesn't affect the screen’s layout grid. That can be achieved like so:

Parameters

modifier

the Modifier to be applied to this wide navigation rail

state

the WideNavigationRailState of this wide navigation rail

hideOnCollapse

whether this wide navigation rail should slide offscreen when it collapses and be hidden, or stay on screen as a collapsed wide navigation rail (default)

collapsedShape

the shape of this wide navigation rail's container when it's collapsed

expandedShape

the shape of this wide navigation rail's container when it's expanded

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

expandedHeaderTopPadding

the padding to be applied to the top of the rail. It's usually needed in order to align the content of the rail between the collapsed and expanded animation

windowInsets

a window insets of the wide navigation rail

arrangement

the Arrangement.Vertical of this wide navigation rail

expandedProperties

ModalWideNavigationRailProperties for further customization of the expanded modal wide navigation rail's window behavior

content

the content of this modal wide navigation rail, usually WideNavigationRailItems

Samples

androidx.compose.material3.samples.ModalWideNavigationRailSampleandroidx.compose.material3.samples.DismissibleModalWideNavigationRailSample