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
The UMD build is also available on unpkg:
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.
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:
Home > Products > iPhone 7 Plus
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 eachListItem
. Ignored by JSON-LD. -
clickHandler
function
(Default: null)
Listen for when aListItem
’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 overBreadcrumbList
’sclickHandler
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:
- 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.