Component

NavigationBar

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

3 variantsThemed defaults48dp target

import dev.formaui.components.navigation.FormaNavigationBar

import dev.formaui.components.navigation.FormaNavigationBarItem

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

KOTLIN

12345678910111213var 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.

ParameterTypeDefaultDescription

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.

ParameterTypeDefaultDescription

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.

PreviousLoadingIndicator Next NavigationDrawer