Navigation Bar¶

AdaptiveNavigationBar is an adaptive navigation bar that uses UIKit's UITabBar on iOS and Material3's NavigationBar on other platforms (Android, Desktop, Web).

On iOS, the native UITabBar is created using the iosItems, iosSelectedIndex, and iosOnItemSelected parameters. On Material platforms, the content lambda is used to provide full customization of the NavigationBar content (typically NavigationBarItems).

Material (Android, Desktop, Web)	Cupertino (iOS < 26)	Liquid Glass (iOS 26+)

Usage¶

@OptIn(ExperimentalCalfUiApi::class)
@Composable
fun MyNavigationBar() {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val items = listOf("Home", "Search", "Profile")

    AdaptiveNavigationBar(
        // Material content
        content = {
            items.forEachIndexed { index, item ->
                NavigationBarItem(
                    selected = selectedIndex == index,
                    onClick = { selectedIndex = index },
                    icon = { Icon(Icons.Default.Home, contentDescription = item) },
                    label = { Text(item) },
                )
            }
        },
        // iOS-specific parameters
        iosItems = items.map { title ->
            UIKitUITabBarItem(title = title)
        },
        iosSelectedIndex = selectedIndex,
        iosOnItemSelected = { selectedIndex = it },
    )
}

Parameters¶

Parameter	Description
`modifier`	The modifier to be applied to the navigation bar.
`containerColor`	The color used for the background of this navigation bar.
`contentColor`	The preferred color for content inside this navigation bar.
`tonalElevation`	The tonal elevation of this navigation bar.
`windowInsets`	The window insets to be applied to the navigation bar.
`iosItems`	The list of tab bar items for the iOS UITabBar. See `UIKitUITabBarItem`.
`iosSelectedIndex`	The index of the currently selected item on iOS.
`iosOnItemSelected`	Callback invoked when an item is selected on iOS, with the item index.
`content`	The content of the navigation bar on Material platforms, typically `NavigationBarItem`s within a `RowScope`.

iOS Tab Bar Items¶

Use UIKitUITabBarItem to define items for the iOS UITabBar:

UIKitUITabBarItem(
    title = "Home",
    image = UIKitImage.systemName("house"),
    selectedImage = UIKitImage.systemName("house.fill"),
)