@bigfishtv/cockpit/src/components/breadcrumb/Breadcrumb.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'

/**
 * Wraps its children in a breadcrumb identifier, so the breadcrumb train can get updated based on scroll position
 */
export default class Breadcrumb extends Component {
	static propTypes = {
		/** Breadcrumb title */
		title: PropTypes.string,
		/** Breacrumb url (if applicable) */
		url: PropTypes.string,
	}

	static defaultProps = {
		title: 'Section',
	}

	componentDidMount() {
		window.breadcrumbs && window.breadcrumbs.update()
	}

	componentDidUpdate(prevProps) {
		if (prevProps.title !== this.props.title || prevProps.url !== this.props.url) {
			window.breadcrumbs && window.breadcrumbs.update()
		}
	}

	render() {
		return (
			<div className="breadcrumb" data-breadcrumb={this.props.title} data-breadcrumb-url={this.props.url}>
				{this.props.children}
			</div>
		)
	}
}