bpk-component-breadcrumb-css

Backpack breadcrumb component.

Usage no npm install needed!

<script type="module">
  import bpkComponentBreadcrumbCss from 'https://cdn.skypack.dev/bpk-component-breadcrumb-css';
</script>

README

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