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>
}
Updated over 1 year ago