[SOLVED] How to make bottom nav background color lighter with elevation in Compose?

How to make bottom nav background color lighter with elevation in Compose?

In XML we have material3 bottom navigation bar style. It's color achieved by using surface color with elevation = 3dp. So in XML higher elevation means lighter background color.

I'm trying to implement same behavior in Compose. But it looks like elevation in Compose doesn't change bottom navigation's color but only adding shadow. So can we apply same behavior in Compose somehow or the only way is to add separate bottom nav's color in Color.kt?

BottomNavigation(
            modifier = Modifier.heightIn(80.dp),
            backgroundColor = MaterialTheme.colorScheme.surface,
            elevation = 3.dp
        )

Solution

You are probably not using material3 library but the old one. There is no BottomNavigation composable in material3, it's called NavigationBar and it has tonalElevation argument instead of elevation that does what you want.