Why is the shadow not showing on my NavigationBar in Jetpack Compose?

I’m using Jetpack Compose and trying to implement a NavigationBar with a shadow, but the shadow isn’t displaying as expected. Here’s the code I have so far:

@Composable
fun MainScreen() {

    val navController = rememberNavController()

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        bottomBar = { BottomNavigationBar(navController = navController) }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding).fillMaxSize()){
            MainNavHost(navController)
        }
    }

}

@Composable
fun BottomNavigationBar(viewModel: BottomNavViewModel = hiltViewModel(), navController: NavHostController) {
    NavigationBar(
        tonalElevation = 8.dp,
        containerColor = ...,
        contentColor = Color.LightGray
    ) {
        CustomBottomNav(
            navController = navController,
            viewModel = viewModel,
            modifier = Modifier.navigationBarsPadding()
        )
    }
}

@Composable
fun MainNavHost(navController: NavHostController, modifier: Modifier = Modifier) {
    ...
}

I added the tonalElevation to NavigationBar, expecting the shadow to appear, but it doesn’t. I verified that Color is not transparent, and I’m using the latest Jetpack Compose version. Is there something I’m missing or any workaround to make the shadow appear on NavigationBar? Any insights would be greatly appreciated!

this is how it looks:

how it should look:

You are not seeing the shadow because you're using Material Design 3 library. Material 3 (aka Material You) handles the elevations differently compared to its predecessor. See: Elevation - Material Design

If you still want a shadow, you can draw a gradient rectangle behind your NavigationBar. Here's how you can achieve a similar look. You can adjust the sizes and offsets:

NavigationBar(
    modifier = Modifier
        .drawBehind {
            drawRect(
                brush = Brush.verticalGradient(
                    colors = listOf(Color.Transparent, Color.Black),
                    startY = -30f,
                    endY = size.height
                ),
                topLeft = Offset(0f, -30f)
            )
        },
    containerColor = MaterialTheme.colorScheme.primaryContainer
) {
    // Navigation Bar Content
}