Breadcrumb

Breadcrumbs give user a context of the currently open page and provide an easy way to navigate back.

Default

Storybook failed to load.

Backpack breadcrumb component.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                import { Component } from 'react';
                                                import BpkBreadcrumb, { BpkBreadcrumbItem } from '@skyscanner/backpack-web/bpk-component-breadcrumb';
                                                
                                                
                                                export default class App extends Component {
                                                  render() {
                                                    return (
                                                      <BpkBreadcrumb label="breadcrumb">
                                                        <BpkBreadcrumbItem href="/">Home</BpkBreadcrumbItem>
                                                        <BpkBreadcrumbItem href="/page-1">Page 1</BpkBreadcrumbItem>
                                                        <BpkBreadcrumbItem active>
                                                          Page 2
                                                        </BpkBreadcrumbItem>
                                                      </BpkBreadcrumb>
                                                    );
                                                  }
                                                }

Structured Data

JSON-LD schema mark up can be used to add structured data to the component to improve the SEO of the component through the schemaMetaData property.

Props

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

Props

Storybook failed to load.