bpk-component-horizontal-nav

Backpack horizontal nav component.

Installation

npm install bpk-component-horizontal-nav --save-dev

Usage

import React, { Component } from 'react';
import BpkHorizontalNav, { BpkHorizontalNavItem } from '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

BpkHorizontalNav

| Property | PropType | Required | Default Value | | --------------------------------- | -------- | -------- | ------------- | | children | node | true | - | | autoScrollToSelected | bool | false | false | | className | string | false | null | | leadingScrollIndicatorClassName | string | false | null | | showUnderline | bool | false | true | | trailingScrollIndicatorClassName | string | false | null | | type | oneOf('default', 'light') | false | 'default' |

autoScrollToSelected

Ensures that the selected item is within view when loaded on narrow-screened devices.

showUnderline

When set to false, the bottom border on the component isn't included. This refers to the underline on the whole BpkHorizontalNav, not the line that appears under the selected item.

BpkHorizontalNavItem

| Property | PropType | Required | Default Value | | ----------- | -------- | -------- | ------------- | | children | node | true | - | | className | string | false | null | | spaceAround | bool | false | false | | selected | bool | false | false | | disabled | bool | false | false | | href | string | false | null |

Note: disabled and selected are mutually exclusive for true values, i.e. only one of them can be true for a given nav item.

Theme Props

• horizontalNavLinkColor
• horizontalNavLinkHoverColor
• horizontalNavLinkActiveColor
• horizontalNavLinkSelectedColor
• horizontalNavBarSelectedColor