bradestey / react-semantic-breadcrumbs

Use React to render Breadcrumbs using RDFa, HTML5, Microdata, or JSON-LD.

react-semantic-breadcrumbs

react-semantic-breadcrumbs makes it easy to render semantic breadcrumbs in RDFa, microdata, JSON-LD or plain HTML5.

Installation

$ npm i react-semantic-breadcrumbs --save

import { BreadcrumbList, ListItem } from 'react-semantic-breadcrumbs'

The UMD build is also available on unpkg:

<script src="https://unpkg.com/react-semantic-breadcrumbs/umd/react-semantic-breadcrumbs.min.js"></script>

When using the UMD build, you can find the components on window.ReactSemanticBreadcrumbs.BreadcrumbList and window.ReactSemanticBreadcrumbs.ListItem.

Basic Usage

Just import the BreadcrumbList and ListItem components and pass your desired format.

import React from 'react'
import { BreadcrumbList, ListItem } from 'react-semantic-breadcrumbs'

const breadcrumbs = (
  <BreadcrumbList format="RDFa" separator=" > ">
    <ListItem url="/">Home</ListItem>
    <ListItem url="/products">Products</ListItem>
    <ListItem url="/products/iphone-7-plus">iPhone 7 Plus</ListItem>
  </BreadcrumbList>
)

Will produce the following HTML:

  <ol vocab="http://schema.org/" typeof="BreadcrumbList">
    <li property="itemListElement" typeof="ListItem">
      <a property="item" typeof="Thing" href="/">
        <span property="name">Home</span>
      </a> >
      <meta property="position" content="1" />
    </li>
    <li property="itemListElement" typeof="ListItem">
      <a property="item" typeof="Thing" href="/products">
        <span property="name">Products</span>
      </a> >
      <meta property="position" content="2" />
    </li>
    <li property="itemListElement" typeof="ListItem">
      <a property="item" typeof="Thing" href="/products/iphone-7-plus">
        <span property="name">iPhone 7 Plus</span>
      </a>
      <meta property="position" content="3" />
    </li>
  </ol>

BreadcrumbList Props

• format string (Default: HTML5)
  Choose from “RDFa”, “Microdata”, “HTML5”, or “JSON-LD”. Case-insensitive.

• separator string (Default: null)
  The string to place between each ListItem. Ignored by JSON-LD.

• clickHandler function (Default: null)
  Listen for when a ListItem’s <a> tag is clicked.

ListItem Props

• url string (Required)
  The page to link to.

• type string (Default: Thing)
  Uses schema.org types.

• clickHandler function (Default: null)
  Listen for when the <a> tag is clicked. Takes precedence over BreadcrumbList’s clickHandler prop.

Import Only a Specific Format

You may only want to ever use one specific format. To cherry-pick a format for smaller browserify/rollup/webpack bundles, you can do this:

import BreadcrumbList from 'react-semantic-breadcrumbs/MicrodataBreadcrumbList'
import ListItem from 'react-semantic-breadcrumbs/MicrodataListItem'

• HTML5: HTML5BreadcrumbList & HTML5ListItem
• RDFa: RDFaBreadcrumbList & RDFaListItem
• Microdata: MicrodataBreadcrumbList & MicrodataListItem
• JSON-LD: JSONLDBreadcrumbList & JSONLDListItem

Example

To run the example application, run these commands from inside the /example directory.

$ npm i
$ npm run build

To view the example, open the example/index.html file.