Extra

NavigationDrawer

A FormaUI modal navigation drawer — an off-canvas panel of destinations that slides in over content and is dismissed with a scrim tap, delegating to Material 3's ModalNavigationDrawer.

1 variantThemed defaults

import dev.formaui.components.navigation.FormaModalNavigationDrawer

import dev.formaui.components.navigation.FormaNavigationDrawerItem

modal

Preview

This toggle is site chrome only — the preview has its own light/dark switch inside.

LIVE PREVIEW

Live preview — ~37 MB development build

Usage

KOTLIN

1234567891011val drawerState = rememberDrawerState(DrawerValue.Open)
var selected by remember { mutableIntStateOf(0) }
FormaModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        FormaNavigationDrawerItem(label = "Inbox", selected = selected == 0, onClick = { selected = 0 }, badge = "24")
        FormaNavigationDrawerItem(label = "Sent", selected = selected == 1, onClick = { selected = 1 })
    },
) {
    Text("Mail content behind the drawer")
}

FormaModalNavigationDrawer

Modal drawer that auto-wraps drawerContent in a ModalDrawerSheet; open/closed state is hoisted via DrawerState.

ParameterTypeDefaultDescription

drawerStaterequiredTypeDrawerStateDefaultrequiredDescriptionthe drawer's hoisted open/closed state (e.g. rememberDrawerState(DrawerValue.Closed)).

drawerContentrequiredType@Composable ColumnScope.() -> UnitDefaultrequiredDescriptionthe drawer's items, laid out in a ColumnScope inside a ModalDrawerSheet (typically FormaNavigationDrawerItems).

modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the drawer.

gesturesEnabledTypeBooleanDefaulttrueDescriptionwhether the drawer can be opened/closed by a swipe gesture.

scrimColorTypeColorDefaultDrawerDefaults.scrimColorDescriptionthe color of the scrim that obscures content while the drawer is open (defaults to the M3 default scrim).

drawerContainerColorTypeColorDefaultDrawerDefaults.modalContainerColorDescriptionthe background color of the drawer sheet (defaults to the M3 modal drawer container, themed by FormaTheme).

drawerContentColorTypeColorDefaultcontentColorFor(drawerContainerColor)Descriptionthe preferred content color inside the drawer sheet (defaults to the color matching drawerContainerColor).

contentrequiredType@Composable () -> UnitDefaultrequiredDescriptionthe screen content behind the drawer.

FormaNavigationDrawerItem

A single destination row in the drawer, with optional leading icon and trailing text badge (e.g. an unread count).

ParameterTypeDefaultDescription

labelrequiredTypeStringDefaultrequiredDescriptionthe item's text label.

selectedrequiredTypeBooleanDefaultrequiredDescriptionwhether this item is the current destination.

onClickrequiredType() -> UnitDefaultrequiredDescriptioncalled when the item is tapped.

modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the item.

iconType@Composable (() -> Unit)?DefaultnullDescriptionoptional leading icon (supply a contentDescription on it for accessibility).

badgeTypeString?DefaultnullDescriptionoptional trailing text (e.g. an unread count) shown at the item's end.

colorsTypeNavigationDrawerItemColors?DefaultnullDescriptionthe item colors — text, icon, badge, and selection-container colors for the selected and unselected states. Defaults to the M3 defaults, themed by FormaTheme.

labelTextStyleTypeTextStyle?DefaultnullDescriptionoptional TextStyle override for label, merged on top of the M3 label style.

badgeTextStyleTypeTextStyle?DefaultnullDescriptionoptional TextStyle override for badge, merged on top of the M3 badge style.

Accessibility

Item icons should carry a contentDescription for accessibility (noted on the icon param); dismissible via scrim tap and (when gesturesEnabled) swipe.

PreviousNavigationBar Next NavigationRail