POC Breadcrumb Trail.js

/*
	I have used jQuery deferred objects here for the promises but you will want to swap these out for Es6 promises.
	
	Also, hook this up to Flux (Action, Store etc..)
*/
(function(crumbs, $) {
	crumbs.PROPERTY_KEY = 'adw.breadcrumbs';

	function getRestEndPoint (endpoint) {
		return jQuery.ajax({
			url: endpoint,
			dataType: 'json',
			type: 'GET',
			headers: { 'Accept': 'application/json; charset=utf-8', 'X-RequestDigest': document.getElementById('__REQUESTDIGEST').value }
		});
	}

	function getItemJsonObject (item) {
		return { 
			ID: item.Id, 
			Title: item.Title, 
			Url: item.Url, 
			Link: '<a href="' + item.Url + '">' + item.Title + '</a>', 
			Visible: item.IsVisible, 
			RestUrl: item['odata.id'] 
		};
	}

	function fetchRelativeBreadcrumbsStructure () {
		getRestEndPoint(_spPageContextInfo.webAbsoluteUrl + '/_api/Web/Navigation/TopNavigationBar').then(function(result) {
			breadcrumbs.parent = getItemJsonObject(result.value[1]);

			getRestEndPoint(_spPageContextInfo.webAbsoluteUrl + '/_api/Web/Navigation/GetNodeById%28' + result.value[1].Id + '%29/Children').then(function (balls) { breadcrumbs.children = balls.value.map(function (item) { return getItemJsonObject(item); }); breadcrumbs.promise.resolve(); });
		});

		return breadcrumbs.promise;
	}

	function setBreadcrumbPropertyBag () {
		var ctx = new SP.ClientContext(_spPageContextInfo.webAbsoluteUrl );
		var web = ctx.get_web();

		ctx.load(web);

		var props = web.get_allProperties();

		breadcrumbs.expiry = setExpiryForProperty();

		props.set_item(crumbs.PROPERTY_KEY, breadcrumbs);
	}

	function setExpiryForProperty () {
		var d = new Date();
		var expiry = new Date( d );

		return expiry.setHours(24);
	}

	crumbs.fetch = function () {
		getRestEndPoint(_spPageContextInfo.webAbsoluteUrl + '/_api/web/AllProperties').then(function(properties) {
			breadcrumbs.cached = typeof properties.adw_x002e_breadcrumbs !== 'undefined' ? properties.adw_x002e_breadcrumbs : null;

			breadcrumbs.promise = $.Deferred();

			if (breadcrumbs.cached !== null) {
				breadcrumbs.parent = breadcrumbs.cached.parent;
				breadcrumbs.children = breadcrumbs.cached.children;

				//fire an event or dispatch notification to flux that the data is propergated
			}

			if (breadcrumbs.property === null ? true : breadcrumbs.cached.expiry < new Date() ? true : false) {
				fetchRelativeBreadcrumbsStructure().done(function () {
					setBreadcrumbPropertyBag();
				
					//fire an event or dispatch notification to flux that the data is propergated
					//if there was a previous value in the property this will refresh the state and therefore render the component
				});
			} 	
		});
	};
})(var MyCompany.Breadcrumbs = MyCompany.Breadcrumbs || {}, jQuery);

//MyCompany.Breadcrumbs.fetch();