Bottom navigation

A Bottom Nav represents the primary way of navigation in an application.

Bottom Nav

Maven Central Class reference Source code

Default

Day Night
BottomNav component BottomNav component - dark mode

Installation

Backpack Compose is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

Example of a BpkBottomNav:


                                                
                                                import net.skyscanner.backpack.compose.bottomnav.BpkBottomNav
                                                
                                                BpkBottomNav(
                                                  items = listOf(
                                                    BpkBottomNavItem(
                                                      painter = painterResource(id = R.drawable.sample_icon),
                                                      title = "Explore",
                                                      id = 1,
                                                    ),
                                                    BpkBottomNavItem(
                                                      icon = BpkIcon.Trips,
                                                      title = "Trips",
                                                      id = 2,
                                                    ),
                                                    BpkBottomNavItem(
                                                      icon = BpkIcon.AccountCircle,
                                                      title = "Account",
                                                      id = 3,
                                                      showBadge = true,
                                                    ),
                                                  ),
                                                  selectedItemId = 1,
                                                  onTabClicked = {}, // Handle update
                                                )