Breadcrumb streamType

Frontastic provides you with a Breadcrumb so you can implement it easily if you want to include it in your project.

Below is an example of how that could look on your site:

The BreadcrumbFieldHandler comes with Frontastic as part of the API documentation.

🚧
This only works on pages within the page builder, you can't add this Frontastic component to a dynamic page.

You then need to add it into a Frontastic component. To do this, create a BreadcrumbTastic.json file as you'd usually set up a Frontastic component, as well as the tastic.jsx. Below is an example of what you could include for both:

{
  "tasticType": "breadCrumb",
  "name": "Breadcrumb",
  "category": "Navigation",
  "icon": "menu",
  "schema": [
    {
      "name": "Breadcrumb",
      "fields": [
        {
          "label": "Breadcrumb",
          "field": "breadcrumb",
          "type": "stream",
          "streamType": "breadcrumb",
        }
      ]
    }
  ]
}

import React from 'react'
import PropTypes from 'prop-types'
import { compose } from 'redux';
import tastify from 'frontastic-catwalk/src/js/helper/tastify';
import app from 'frontastic-catwalk/src/js/app/app';



const BreadcrumbTastic = ({ data: { breadcrumb } }) => {
    if (!breadcrumb) {
        return null
    }


    return <div className='breadcrumb'>
        {breadcrumb.map(({ nodeId, name, prefix }) => <div>
            {/* add link elements here, example below */}
        </div>)}
    </div>
}


const NodeLinkArray = PropTypes.arrayOf({
    nodeId: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    prefix: PropTypes.string,
})


BreadcrumbTastic.propTypes = {
    data: PropTypes.shape({
        breadcrumb: NodeLinkArray.isRequired,
    }).isRequired,
}


export default compose(tastify()) BreadcrumbTastic;

If you haven't created a Frontastic component before, see the using Frontastic components article for more information.

Below is an example of the middle section that included styling and link elements.

const BreadcrumbTastic = ({ data: { breadcrumb } }) => {
    return <div className='breadcrumb flex bg-gray-400 px-8 py-3 rounded-t-full space-x-3'>
        {breadcrumb?.map(({ nodeId, name }) => <div className="cursor-pointer" onClick={() => app.getRouter()?.push(`node_${nodeId}`)} >
            <p className="text-gray-700 font-bold" >{name}<span class="chevron right"></span></p>
        </div>)}

        <style>
            {.chevron::before {
            border-style: solid;
            border-width: 0.25em 0.25em 0 0;
            border-color: rgba(74, 85, 104);
            content: '';
            display: inline-block;
            height: 0.55em;
            position: relative;
            top: 0.4em;
            transform: rotate(-45deg);
            vertical-align: top;
            width: 0.55em;
        }

        .chevron.right:before {
            left: 0.1em;
            transform: rotate(45deg);
        }}
        </style>
    </div>
}