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

import React, { Component } from 'react'

/**
 * Displays breadcrumb trail, hooks into global 'breadcrumbs' class to receive updates based on scroll position
 */
export default class BreadcrumbTrail extends Component {
	state = { trail: [] }

	componentDidMount() {
		if (window.breadcrumbs) window.breadcrumbs.addCallback(this.focusChange)
		else console.error('BreadcrumbsHandler not inited yet!')
	}

	componentWillUnmount() {
		window.breadcrumbs.removeCallback(this.focusChange)
	}

	focusChange = trail => {
		this.setState({ trail })
	}

	handleAnchorClick(elem) {
		window.breadcrumbs.scrollTo(elem)
	}

	render() {
		return (
			<nav className="breadcrumbs">
				<ul>
					{this.state.trail.map((crumb, i) => (
						<li className="crumb" key={'crumb_' + i}>
							{crumb.url && <a href={crumb.url}>{crumb.title}</a>}
							{!crumb.url && <span onClick={this.handleAnchorClick.bind(this, crumb.elem)}>{crumb.title}</span>}
							{i !== this.state.trail.length - 1 && (
								<span className="breadcrumbs-divider">
									<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
										<path d="M7.5 4.5L6.44 5.56 9.88 9l-3.44 3.44L7.5 13.5 12 9z" />
									</svg>
								</span>
							)}
						</li>
					))}
				</ul>
			</nav>
		)
	}
}