Default

By default, navigation items are left aligned.

With disabled item

A navigation item can be disabled.

Space around

Navigation items can be configured to have space around them.

Not Underlined

The border that covers the bottom of the component can be hidden.

Light appearance

An alternate appearance is available for display over dark backgrounds.

                                                
                                                import { Component } from 'react';
                                                import BpkHorizontalNav, { BpkHorizontalNavItem } from '@skyscanner/backpack-web/bpk-component-horizontal-nav';
                                                
                                                export default class App extends Component {
                                                  constructor() {
                                                    super();
                                                    this.state = {
                                                      selected: 'flights',
                                                    };
                                                  }
                                                
                                                  onClick = (e) => {
                                                    this.setState({
                                                      selected: e.target.name,
                                                    });
                                                  }
                                                
                                                  render() {
                                                    return (
                                                      <BpkHorizontalNav>
                                                        <BpkHorizontalNavItem
                                                          name="flights"
                                                          selected={this.state.selected === 'flights'}
                                                          onClick={this.onClick}
                                                        >
                                                          Flights
                                                        </BpkHorizontalNavItem>
                                                        <BpkHorizontalNavItem
                                                          name="hotels"
                                                          selected={this.state.selected === 'hotels'}
                                                          onClick={this.onClick}
                                                        >
                                                          Hotels
                                                        </BpkHorizontalNavItem>
                                                        <BpkHorizontalNavItem
                                                          name="car-hire"
                                                          selected={this.state.selected === 'car-hire'}
                                                          onClick={this.onClick}
                                                        >
                                                          Car hire
                                                        </BpkHorizontalNavItem>
                                                      </BpkHorizontalNav>
                                                    );
                                                  }
                                                };

Props