Skip link

Skip links help users of assistive technology navigate our site quicker.

Default

Skip links benefit sighted keyboard or switch users by providing them with a way to skip over lengthy menus or filters. Skip links should be absolutely positioned to ensure that when they become visible they do not shift other content.

It’s ok for a skip link to overlap other content on the page, as long as you are still able to tab forwards or backwards to that content. The skip link is very noticeable, and doesn’t disappear immediately. These are deliberate design decisions to ensure that a user tabbing quickly through the page won’t miss the skip link.

For more information see this Nomensa blog about Skip Links.

Storybook failed to load.

bpk-component-skip-link

Backpack example component.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                import BpkSkipLink from '@skyscanner/backpack-web/bpk-component-skip-link';
                                                
                                                export default () => <BpkSkipLink href="#main" label="Skip to main content" />;

Props

Property PropType Required Default Value
className string false null
label string true -
href string true -

Theme Props

  • skipLinkBackgroundColor