Navigation in Jetpack Compose with Material 3

First, add dependencies. Thanks to Gradle for giving us a structure where we can easily list and share library versions. Add the fallowing dependencies to libs.versions.toml

[versions]
...
material3 = "1.1.2"

[libraries]
....
androidx-compose-material3 = { module = "androidx.compose.material3:material3", version.ref = "material3" }

and add this row to build.gradle.kts (app)

dependencies {
     .....
     implementation(libs.androidx.compose.material3)
     .....
}

Now we can use Material module in project. First, we need to create a list of screens that will be displayed in the Bottom Navigation. 

sealed class BottomNavScreen(
    val route: String,
    val title: String,
    val selectedIcon: ImageVector,
    val unselectedIcon: ImageVector,
    val hasBadge: Boolean,
    val badgeCount: Int? = null
) {

    // for home
    object Home : BottomNavScreen(
        route = "home",
        title = "Home",
        selectedIcon = Icons.Rounded.Home,
        unselectedIcon = Icons.Outlined.Home,
        hasBadge = true,
        badgeCount = 4
    )

    // for profile
    object Profile : BottomNavScreen(
        route = "profile",
        title = "Profile",
        selectedIcon = Icons.Filled.Person,
        unselectedIcon = Icons.Outlined.Person,
        hasBadge = false
    )

}

Navigation graph is

@Composable
fun BottomNavGraph(
    navController: NavHostController
) {
    NavHost(
        navController = navController,
        startDestination = BottomNavScreen.Home.route
    ) {
        composable(route = BottomNavScreen.Home.route) {
            HomeScreen()
        }

        composable(route = BottomNavScreen.Profile.route) {
            ProfileScreen()
        }
    }
}

Source code can be find https://github.com/immustafa/JetpackNavigation