Skip to content

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.

dev.formaui.components.navigation

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

val 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.

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).

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.