Skip to main content

Breadcrumb

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

Table of contents

Default

Implementation

bpk-component-breadcrumb

Backpack breadcrumb component.

Installation

npm install bpk-component-breadcrumb --save-dev

Usage

import React, { Component } from 'react';
import BpkBreadcrumb, { BpkBreadcrumbItem } from '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

BpkBreadcrumb

PropertyPropTypeRequiredDefault Value
childrennodetrue-
labelstringtrue-
schemaMetaDataarray({url: string, label: string})falsenull

BpkBreadcrumbItem

PropertyPropTypeRequiredDefault Value
childrennodetrue-
hrefstringfalsenull
activeboolfalsefalse
linkPropsobjectfalsenull