Dynamic breadcrumb based on current page & list using Javascript/jQuery ()

Question

found these two approaches to realize breadcrumbs:

• jquery - dynamic breadcrumb
• Dynamic breadcrumb based on current page using Javascript/jQuery

The later one is almost the thing I'm looking for but has three issues:

1. it fails if there a serveral pages with the same name
2. the current page has a link
3. I would like to remove the first i.e. Home-link

Could you please help me to improve that, I'm a total noob... ?

Thats the code which I took from the other post:

var url = "level3.html";
//location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
var currentItem = $(".items").find("[href$='" + url + "']");
$(".bredcrumb").html($("<a href='/'>Home</a>"));
$(currentItem.parents("li").get().reverse()).each(function () {
 $(".bredcrumb").append("/").append( $(this).children("a"));
});

The list:

<nav class="items">
 <ul>
 <li><a href="test.html">Test 1</a>
 </li>
 <li><a href="test2.html">Test 2</a>
 <ul>
 <li><a href="level1.html">Level 1</a>
 </li>
 <li><a href="test/level2.html">Level 2</a>
 <ul>
 <li><a href="test/level2/level3.html">Level 3</a>
 </li>
 <li><a href="test/level2/level32.html">Also at level 3</a>
 </li>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href="test3.html">Test 3</a>
 </li>
 </ul>
</nav>
<div class="bredcrumb"></div>

I changed location.pathname.substring(location.pathname.lastIndexOf("/") + 1); into location.pathname.substring(location.pathname.lastIndexOf("/") - 3); which seems to help for the first issue. But I'm not sure whether that is a good solution.

Thank you very much, Tobias

• user4773362: @user3064227 helped me to solve issue nr. 3 but I'm still not able to solve the other issues. Can anybody help me?
• user4773362: I solved issue nr. 2 with the help off css and the nth-last-child selector.

Answer 1

The code you are looking for is

var url = "level3.html";
//location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
var currentItem = $(".items").find("[href$='" + url + "']");
$(".bredcrumb").html($("Home"));
$(currentItem.parents("li").get().reverse()).each(function () {
 $(".bredcrumb").append("/").append( $(this).children("a"));
});

---

This removes the current page link. if we understand the code a bit url is capturing the url of the page from which this code is extracting the last part which is assumed to be the html page name (ex: home.html). then the currentItem finding the html element that has the html page name found earlier.the last line does two things 1. get the parent element of the anchor tag where you get the html page name and then append the child name of the parent element in the breadcrumb. this is so because the page name and the appearance int he menu is not always same example you name the page as myhmpg.html but in the menu u might have shown it as Home. Hope this explanation helps. Please comment back you see your question is not answered properly

• user4773362: Thank you very much, that solved the 3. issue. I'm now trying to solve the current page issue with an if/else argument. The first issue is more complicated, has anyone an idea?

Answer 2

Full Javascript function to display breadcrumbs from page url

 function getBreadcrumbs() {
 const here = location.href.split('/').slice(3);
 // console.log(here)
 const parts = [{"text": 'Home', "link": '/'}];
 // console.log(parts)
 for (let i = 0; i < here.length; i++) {
 const part = here[i];
 // console.log(part)
 const text = decodeURIComponent(part).toUpperCase().split('.')[0];
 // console.log(text)
 const link = '/' + here.slice(0, i + 1).join('/');
 console.log(link)
 parts.push({"text": text, "link": link});
 // console.log(parts)
 }
 return parts.map((part) => {
 return "<a href=\"" + part.link + "\">" + part.text + "</a>"
 }).join('<span style="padding: 5px">/</span>')
}
document.getElementById("demo").innerHTML = getBreadcrumbs();

Answer 3

I finally found the (dirty?) answer to the problem:

 $(document).ready(function() { 
 var url = location.href; //absolute path instead of file name
 var currentItem = $(\".items\").find(\"[href$='\" + url + \"']\");
 $(\".bredcrumb\").html($(\"Home\")); 
 $(currentItem.parents(\"li\").get().reverse()).each(function () {
 $(\".bredcrumb\").append( $(this).children(\"a\"));
 });
 });

Then I hided the last-child with css and took a css border to divide the breadcrumbs.