- Welcome
- Getting started
- Latest updates
- Monthly updates
- Foundations
-
Components
- Accordion
- Alert
- Alignment
- App Search Modal
- Aria live
- Autosuggest
- Badge
- Banner alert
- Bar chart
- Blockquote
- Bottom navigation
- Bottom sheet
- Breadcrumb
- Breakpoint
- Button
- Calendar
- Card
- Card list
- Card button
- Carousel
- Checkbox
- Chip
- Chip group
- Code
- Content cards
- Data Table
- Datepicker
- Description list
- Dialog
- Divider
- Drawer
- Field Set
- Flare
- Flat list
- Flight leg
- Floating action button
- Floating notification
- Form label
- Form validation
- Graphic promotion
- Horizontal navigation
- Icon
- Image
- Infinite scroll
- Info Banner
- Link
- List
- Map
- Mobile scroll container
- Modal
- Navigation bar
- Nudger
- Overlay
- Page indicator
- Pagination
- Panel
- Phone input
- Picker
- Popover
- Price
- Progress bar
- Radio button
- Rating
- Scrollable calendar
- Search Modal
- Section header
- Section list
- Select
- Skeleton
- Skip link
- Slider
- Snackbar
- Snippet
- Spinner
- Split input
- Star rating
- Switch
- Table
- Text
- Text input
- Theming
- Ticket
- Toast
- Tooltip
- Touchable native feedback
- Touchable overlay
- Content
- Accessibility
- Contributing
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.
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
Check out the full list of props on Skyscanner's design system documentation website.
Props
Made with ❤️ by Skyscanner © 2023
© 2023 Skyscanner Backpack. Page last updated on Oct 2, 2023, 16:02