Horizontal navigation

A simple navigation component, ideal for representing a section of a page that links to other pages or views within the page.

Horizontal Nav

Maven Central Class reference Source code

Default

Day Night
HorizontalNav component HorizontalNav component - dark mode

Installation

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

Usage

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

Example of a HorizontalNav in XML


                                                
                                                <net.skyscanner.backpack.horisontalnav.BpkHorizontalNav
                                                  android:layout_width="wrap_content"
                                                  android:layout_height="wrap_content"/>

Example of a HorizontalNav in Kotlin


                                                
                                                import net.skyscanner.backpack.horisontalnav.BpkHorizontalNav
                                                
                                                BpkHorizontalNav(context).apply {
                                                  addTab(newTab().setText("1"))
                                                  addTab(newTab().setText("2"))
                                                }

Theme Props

  • horizontalNavTextColor
  • horizontalNavSelectedTextColor
  • horizontalNavIndicatorColor

Styles can be changed globally through bpkHorizontalNavStyle and bpkHorizontalNavStyleAlternate. Check theming for more information.