Navigation Bar

Default

Collapsible

Transparent

SurfaceContrast

Installation

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

Usage

Note: By default, navigation bar will include (and consume) window insets. If you don't want this, set insets parameter to null.

Example of a navigation bar with back navigation icon

                                                
                                                import net.skyscanner.backpack.compose.navigationbar.BpkTopNavBar
                                                import net.skyscanner.backpack.compose.navigationbar.NavIcon
                                                
                                                BpkTopNavBar(
                                                  title = stringResource(R.string.navigation_bar_title),
                                                  navIcon = NavIcon.Back(contentDescription = stringResource(R.string.navigation_back)) { /** onClick **/ },
                                                )

Example of a navigation bar with close navigation icon

                                                
                                                import net.skyscanner.backpack.compose.navigationbar.BpkTopNavBar
                                                import net.skyscanner.backpack.compose.navigationbar.NavIcon
                                                
                                                BpkTopNavBar(
                                                  title = stringResource(R.string.navigation_bar_title),
                                                  navIcon = NavIcon.Close(contentDescription = stringResource(R.string.navigation_close)) { /** onClick **/ },
                                                )

Example of a navigation bar with no navigation icon

                                                
                                                import net.skyscanner.backpack.compose.navigationbar.BpkTopNavBar
                                                import net.skyscanner.backpack.compose.navigationbar.NavIcon
                                                
                                                BpkTopNavBar(
                                                  title = stringResource(R.string.navigation_bar_title),
                                                  navIcon = NavIcon.None,
                                                )

Example of a navigation bar with icon actions

                                                
                                                import net.skyscanner.backpack.compose.icon.BpkIcon
                                                import net.skyscanner.backpack.compose.navigationbar.BpkTopNavBar
                                                import net.skyscanner.backpack.compose.navigationbar.NavIcon
                                                import net.skyscanner.backpack.compose.navigationbar.IconAction
                                                
                                                BpkTopNavBar(
                                                  title = stringResource(R.string.navigation_bar_title),
                                                  navIcon = NavIcon.Back(contentDescription = stringResource(R.string.navigation_back)) { /** onClick **/ },
                                                  actions = listOf(
                                                    IconAction(icon = BpkIcon.AccountIdCard,
                                                      contentDescription = stringResource(R.string.navigation_id_card)) { /** onClick **/ },
                                                    IconAction(icon = BpkIcon.Accessibility,
                                                      contentDescription = stringResource(R.string.navigation_accessibility)) { /** onClick **/ },
                                                    IconAction(icon = BpkIcon.Account, contentDescription = stringResource(R.string.navigation_account)) { /** onClick **/ },
                                                  ),
                                                )

Example of a navigation bar with text action

                                                
                                                import net.skyscanner.backpack.compose.navigationbar.BpkTopNavBar
                                                import net.skyscanner.backpack.compose.navigationbar.NavIcon
                                                import net.skyscanner.backpack.compose.navigationbar.TextAction
                                                
                                                BpkTopNavBar(
                                                  title = stringResource(R.string.navigation_bar_title),
                                                  navIcon = NavIcon.Back(contentDescription = stringResource(R.string.navigation_back)) { /** onClick **/ },
                                                  action = TextAction(text = stringResource(R.string.navigation_text_action)) { /** onClick **/ },
                                                )

Example of a collapsible navigation bar:

                                                
                                                import androidx.compose.foundation.lazy.LazyColumn
                                                import net.skyscanner.backpack.compose.icon.BpkIcon
                                                import net.skyscanner.backpack.compose.navigationbar.BpkTopNavBar
                                                import net.skyscanner.backpack.compose.navigationbar.NavIcon
                                                import net.skyscanner.backpack.compose.navigationbar.IconAction
                                                import net.skyscanner.backpack.compose.navigationbar.nestedScroll
                                                import net.skyscanner.backpack.compose.navigationbar.rememberTopAppBarState
                                                import net.skyscanner.backpack.compose.text.BpkText
                                                
                                                val state = rememberTopAppBarState()
                                                
                                                Column(modifier.nestedScroll(state)) {
                                                  BpkTopNavBar(
                                                    state = state,
                                                    title = stringResource(R.string.navigation_bar_title),
                                                    navIcon = NavIcon.Back(contentDescription = stringResource(R.string.navigation_back)) { /** onClick **/ },
                                                    actions = listOf(
                                                      IconAction(
                                                        icon = BpkIcon.AccountIdCard,
                                                        contentDescription = stringResource(R.string.navigation_id_card)
                                                      ) { /** onClick **/ },
                                                      IconAction(
                                                        icon = BpkIcon.Accessibility,
                                                        contentDescription = stringResource(R.string.navigation_accessibility)
                                                      ) { /** onClick **/ },
                                                      IconAction(
                                                        icon = BpkIcon.Account,
                                                        contentDescription = stringResource(R.string.navigation_account)
                                                      ) { /** onClick **/ },
                                                    ),
                                                  )
                                                
                                                  LazyColumn {
                                                    items(10) {
                                                      BpkText(text = "Item #$it")
                                                    }
                                                  }
                                                }

By default, The navigation bar is solid style, but you can specify the OnImage style to make it transparent while in expanded state. Example of a collapsible transparent navigation bar:

                                                
                                                import androidx.compose.foundation.lazy.LazyColumn
                                                import net.skyscanner.backpack.compose.icon.BpkIcon
                                                import net.skyscanner.backpack.compose.navigationbar.BpkTopNavBar
                                                import net.skyscanner.backpack.compose.navigationbar.NavIcon
                                                import net.skyscanner.backpack.compose.navigationbar.IconAction
                                                import net.skyscanner.backpack.compose.navigationbar.nestedScroll
                                                import net.skyscanner.backpack.compose.navigationbar.rememberTopAppBarState
                                                import net.skyscanner.backpack.compose.text.BpkText
                                                
                                                val state = rememberTopAppBarState()
                                                
                                                Column(modifier.nestedScroll(state)) {
                                                  BpkTopNavBar(
                                                    state = state,
                                                    title = stringResource(R.string.navigation_bar_title),
                                                    navIcon = NavIcon.Back(contentDescription = stringResource(R.string.navigation_back)) { /** onClick **/ },
                                                    actions = listOf(
                                                      IconAction(
                                                        icon = BpkIcon.AccountIdCard,
                                                        contentDescription = stringResource(R.string.navigation_id_card)
                                                      ) { /** onClick **/ },
                                                      IconAction(
                                                        icon = BpkIcon.Accessibility,
                                                        contentDescription = stringResource(R.string.navigation_accessibility)
                                                      ) { /** onClick **/ },
                                                      IconAction(
                                                        icon = BpkIcon.Account,
                                                        contentDescription = stringResource(R.string.navigation_account)
                                                      ) { /** onClick **/ },
                                                    ),
                                                      style = NavBarStyle.OnImage,
                                                  )
                                                
                                                  LazyColumn {
                                                    items(10) {
                                                      BpkText(text = "Item #$it")
                                                    }
                                                  }
                                                }