Nav Bar

Collapsed

Day	Night

Expanded

Day	Night

Navigation

Day	Night

Installation

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

Usage

The NavBar component can be used in both XML and Kotlin/Java

Example of a NavBar in XML

                                                
                                                <net.skyscanner.backpack.navbar.BpkNavBar
                                                  android:layout_width="match_parent"
                                                  android:layout_height="wrap_content"
                                                  app:navBarTitle="Nav Bar"
                                                  app:navBarIcon="@drawable/bpk_native_android__back"
                                                  app:navBarMenu="@menu/settings"/>

Example of a NavBar in Kotlin

                                                
                                                import net.skyscanner.backpack.navbar.BpkNavBar
                                                
                                                BpkNavBar(context).apply {
                                                  title = "Nav Bar"
                                                  menu = R.menu.settings
                                                  icon = AppCompatResources.getDrawable(context, R.drawable.bpk_native_android__back)
                                                }

The NavBar component uses the same logic as AppBarLayout, and needs to be used as a direct child of CoordinatorLayout.

The scrolling child of CoordinatorLayout should have app:layout_behavior="@string/appbar_scrolling_view_behavior" attribute.

Theme Props

Styles can be changed globally through bpkNavBarStyle. Check theming for more information.