Skip to content

Component

NavigationBar

A FormaUI bottom navigation bar — top-level destination switching, delegating to Material 3's NavigationBar.

dev.formaui.components.navigation

No badgeNumeric badgeDot badge

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

var selected by remember { mutableIntStateOf(0) }
FormaNavigationBar {
    FormaNavigationBarItem(
        selected = selected == 0, onClick = { selected = 0 },
        icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
        label = "Home",
    )
    FormaNavigationBarItem(
        selected = selected == 1, onClick = { selected = 1 },
        icon = { Icon(Icons.Default.Notifications, contentDescription = "Alerts") },
        label = "Alerts", badgeCount = 3,
    )
}

FormaNavigationBar

Bottom navigation bar container; populate its RowScope content with FormaNavigationBarItems.

modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the bar.
containerColorTypeColorDefaultNavigationBarDefaults.containerColorDescriptionthe bar's background color (defaults to the M3 navigation-bar container, themed by FormaTheme).
contentColorTypeColorDefaultcontentColorFor(containerColor)Descriptionthe preferred content color for items (defaults to the color matching containerColor).
contentrequiredType@Composable RowScope.() -> UnitDefaultrequiredDescriptionthe bar's items, laid out in a RowScope (typically FormaNavigationBarItems).

FormaNavigationBarItem

A single destination in a FormaNavigationBar (RowScope extension) with built-in numeric or dot badge support on the icon.

selectedrequiredTypeBooleanDefaultrequiredDescriptionwhether this item is the current destination.
onClickrequiredType() -> UnitDefaultrequiredDescriptioncalled when the item is tapped.
iconrequiredType@Composable () -> UnitDefaultrequiredDescriptionthe item's icon (supply a contentDescription on it for accessibility).
modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the item.
labelTypeString?DefaultnullDescriptionoptional text label shown under the icon.
enabledTypeBooleanDefaulttrueDescriptionwhether the item is interactive.
badgeCountTypeInt?DefaultnullDescriptionoptional unread count to show as a numeric badge on the icon.
showBadgeDotTypeBooleanDefaultfalseDescriptionwhen true and badgeCount is null, shows a dot badge on the icon.
alwaysShowLabelTypeBooleanDefaulttrueDescriptionwhether the label is shown even when the item is unselected.
colorsTypeNavigationBarItemColors?DefaultnullDescriptionthe item colors — icon, label, and selection-indicator colors for the selected, unselected, and disabled states. Defaults to the M3 defaults, themed by FormaTheme.
labelTextStyleTypeTextStyle?DefaultnullDescriptionoptional TextStyle override for label, merged on top of the M3 label style so a partial override (e.g. only fontWeight) keeps the M3 defaults for everything else.

Accessibility

48dp touch target and selection semantics come from Material 3's NavigationBarItem; supply a contentDescription on each item's icon for accessibility.