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

| Property | PropType | Required | Default Value | | ------------------ | ------------------------------------ | -------- | ------------- | | children | node | true | - | | label | string | true | - | | schemaMetaData | array({url: string, label: string}) | false | null |

BpkBreadcrumbItem

| Property | PropType | Required | Default Value | | ------------------ | -------------------------- | -------- | ------------- | | children | node | true | - | | href | string | false | null | | active | bool | false | false | | linkProps | object | false | null |