Navigation bar

The navigation bar component encapsulates a title and icon/text actions for controlling views.

Default

Storybook failed to load.

With text button

The navigation bar can be composed with text buttons.

Storybook failed to load.

With icon button

The navigation bar can be composed with different icon buttons.

Storybook failed to load.

With a custom title element

The title can include elements other than text.

Storybook failed to load.

Sticky

Storybook failed to load.

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>
                                                    }
                                                  />
                                                )

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"
                                                  />
                                                )

BpkNavigationBarButtonLink


                                                
                                                import { BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
                                                
                                                export default () => (
                                                  <BpkNavigationBarButtonLink onClick={() => {}}>
                                                    Done
                                                  </BpkNavigationBarButtonLink>
                                                )

Props

Check out the full list of props on Skyscanner's design system documentation website.

Props

Storybook failed to load.