1.0.2 • Public • Published

    react-semantic-breadcrumbs npm package

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


    $ npm i react-semantic-breadcrumbs --save
    import { BreadcrumbList, ListItem } from 'react-semantic-breadcrumbs'

    The UMD build is also available on unpkg:

    <script src=""></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>

    Will produce the following HTML:

      <ol vocab="" 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 property="itemListElement" typeof="ListItem">
          <a property="item" typeof="Thing" href="/products">
            <span property="name">Products</span>
          </a> >
          <meta property="position" content="2" />
        <li property="itemListElement" typeof="ListItem">
          <a property="item" typeof="Thing" href="/products/iphone-7-plus">
            <span property="name">iPhone 7 Plus</span>
          <meta property="position" content="3" />

    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 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


    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.


    npm i react-semantic-breadcrumbs

    DownloadsWeekly Downloads






    Last publish


    • bradestey