bpk-component-navigation-bar

bpk-component-navigation-bar

Backpack navigation bar component.

Installation

Check the main Readme for a complete installation guide.

Usage

BpkNavigationBar

import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-left';
import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';

import BpkNavigationBar, { BpkNavigationBarIconButton, BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';

const ArrowIconWithRtl = withRtlSupport(ArrowIcon);

export default () => (
  <BpkNavigationBar
    title="Backpack"
    leadingButton={
      <BpkNavigationBarIconButton
        onClick={() => {}}
        icon={ArrowIconWithRtl}
        label="back"
      />
    }
    trailingButton={
      <BpkNavigationBarButtonLink onClick={() => {}}>Done</BpkNavigationBarButtonLink>
    }
  />
)

Props

Property	PropType	Required	Default Value
id	string	true	-
title	node	true	-
className	string	false	null
leadingButton	element	false	null
trailingButton	element	false	null
sticky	bool	false	false

Theme props

• navigationBarBackgroundColor
• navigationBarTitleColor

BpkNavigationBarIconButton

import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-left';
import { BpkNavigationBarIconButton } from '@skyscanner/backpack-web/bpk-component-navigation-bar';

export default () => (
  <BpkNavigationBarIconButton
    onClick={() => {}}
    icon={ArrowIcon}
    label="back"
  />
)

Props

Property	PropType	Required	Default Value
icon	func	true	-
onClick	func	true	-
label	string	true	-
className	string	false	null

Theme props

• navigationBarIconButtonColor
• navigationBarIconButtonActiveColor
• navigationBarIconButtonHoverColor

BpkNavigationBarButtonLink

import { BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';

export default () => (
  <BpkNavigationBarButtonLink onClick={() => {}}>
    Done
  </BpkNavigationBarButtonLink>
)

Props

Property	PropType	Required	Default Value
children	node	true	-
onClick	func	true	-
className	string	false	null

Theme props

• navigationBarButtonLinkColor
• navigationBarButtonLinkActiveColor
• navigationBarButtonLinkHoverColor
• navigationBarButtonLinkVisitedColor