Navigation Bar

Navigation Bar

A bottom navigation component that lets users navigate between primary destinations.


Installation

./gradlew lumo --add NavigationBar

Usage

Basic Navigation Bar

var selectedItem by remember { mutableStateOf("home") }
val items = mapOf(
    "home" to "Home",
    "search" to "Search",
    "profile" to "Profile"
)
 
NavigationBar {
    items.forEach { (key, label) ->
        NavigationBarItem(
            icon = { Icon(Icons.Default.Home, contentDescription = label) },
            label = { Text(label) },
            selected = selectedItem == key,
            onClick = { selectedItem = key }
        )
    }
}

Custom Navigation Bar

NavigationBar(
    containerColor = AppTheme.colors.surface,
    contentColor = AppTheme.colors.onSurface
) {
    NavigationBarItem(
        selected = selected,
        onClick = { /* Handle click */ },
        icon = { Icon(Icons.Default.Home, "Home") },
        label = { Text("Home") },
        colors = NavigationBarItemDefaults.colors(
            selectedIconColor = AppTheme.colors.primary,
            selectedTextColor = AppTheme.colors.primary
        )
    )
}

API Documentation

The container component that holds navigation items.

Parameters

ParameterTypeDefaultDescription
modifierModifierModifierModifier for the container
containerColorColorbackgroundBackground color of the nav bar
contentColorColorcontentColorFor()Color of the content
windowInsetsWindowInsetssystemBarsWindow insets for the nav bar
content@Composable RowScope.() -> Unit-Navigation items content

Individual navigation items within the bar.

Parameters

ParameterTypeDefaultDescription
selectedBoolean-Whether this item is selected
onClick() -> Unit-Called when this item is clicked
icon@Composable () -> Unit-Icon content for this item
modifierModifierModifierModifier for the item
enabledBooleantrueWhether the item is enabled
label@Composable (() -> Unit)?nullOptional text label for this item
alwaysShowLabelBooleantrueShow label regardless of selection
colorsNavigationBarItemColorsdefaults.colors()Colors for different item states
textStyleTextStyletypography.label2Text style for the label
interactionSourceMutableInteractionSourceremember{}Source of interactions for the item