Kotlin with Jetpack Compose - Bottom Navigation Bar

Bottom Navigation Bar is an essential UI component in mobile application development. In Jetpack compose we have aBottomNavigation component that we can easily use with the Scaffold bottomBar parameter.

To create this example, first we have to import the necessary Compose components, including Scaffold, BottomNavigation, BottomNavigationItem, Icon, Text, and others. Your editor will support for you with this.(You can also find the imports from the full code)

Then I have created a sealed class called BottomNav that represents each screen in the app that can be navigated to, using the bottom navigation bar. Each screen has a route, a label, and an icon.

sealed class BottomNav(val route: String, val label: String, val icon: ImageVector) {
    object Screen1 : BottomNav("screen1", "Dashboard", Icons.Filled.Home)
    object Screen2 : BottomNav("screen2", "Contacts", Icons.Filled.List)
    object Screen3 : BottomNav("screen3", "Profile", Icons.Filled.Person)
}

Then I have added the navController variable to handle the bottom bar navigation and bottomNavItems list with Screens from BottomNav.

    val navController = rememberNavController()

    val bottomNavItems = listOf(
        BottomNav.Screen1,
        BottomNav.Screen2,
        BottomNav.Screen3
    )