Bottom Navigation for Jetpack Compose

BottomNavigation.kt

// Bottom navigation bar with icons for home, about us, settings and profile

        Spacer(modifier = Modifier.height(20.dp))
        BottomNavigation(
            backgroundColor = Color.White,
            modifier = Modifier
                .fillMaxWidth()
                .height(56.dp)
        ) {
            BottomNavigationItem(
                icon = {
                    Icon(
                        imageVector = Icons.Default.Home,
                        contentDescription = "Home",
                        tint = Color.Black,
                        modifier = Modifier.size(24.dp)
                    )
                },
                label = { Text(text = "Home") },
                selected = true,
                onClick = { /*TODO*/ },
                alwaysShowLabel = false,
                selectedContentColor = Color.Black,
                unselectedContentColor = Color.Gray,
            )
            BottomNavigationItem(
                icon = {
                    Icon(
                        imageVector = Icons.Default.Info,
                        contentDescription = "About Us",
                        tint = Color.Black,
                        modifier = Modifier.size(24.dp)
                    )
                },
                label = { Text(text = "About Us") },
                selected = false,
                onClick = { /*TODO*/ },
                alwaysShowLabel = true,
                selectedContentColor = Color.Black,
                unselectedContentColor = Color.Gray,
            )
            BottomNavigationItem(
                icon = {
                    Icon(
                        imageVector = Icons.Default.Settings,
                        contentDescription = "Settings",
                        tint = Color.Black,
                        modifier = Modifier.size(24.dp)
                    )
                },
                label = { Text(text = "Settings") },
                selected = true,
                onClick = { /*TODO*/ },
                alwaysShowLabel = false,
                selectedContentColor = Color.Black,
                unselectedContentColor = Color.Gray,
            )
            BottomNavigationItem(
                icon = {
                    Icon(
                        imageVector = Icons.Default.Person,
                        contentDescription = "Profile",
                        tint = Color.Black,
                        modifier = Modifier.size(24.dp)
                    )
                },
                label = { Text(text = "Profile") },
                selected = false,
                onClick = { /*TODO*/ },
                alwaysShowLabel = true,
                selectedContentColor = Color.Black,
                unselectedContentColor = Color.Gray,
            )
        }