JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li><span>Elem 1</span></li>
<li><span>Elem 2</span></li>
<li><span>Elem 3</span></li>
</ul>
JavaScript
function getTagName(element) {
return element.tagName;
}
function clickHandler(event) {
var target = event.target,
breadcrumb = [],
temp;
while (target) {
target = target.parentElement;
if (target) {
breadcrumb.unshift(([].slice.call(target.children).map(getTagName).join(" + ")));
}
}
// HTML is always there
breadcrumb.unshift(document.documentElement.tagName);
console.log(breadcrumb.join(" > "));
}
document.addEventListener('click', clickHandler, false);