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:
- it fails if there a serveral pages with the same name
- the current page has a link
- 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
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:
- it fails if there a serveral pages with the same name
- the current page has a link
- 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
Share Improve this question edited May 23, 2017 at 12:32 CommunityBot 11 silver badge asked Aug 1, 2016 at 12:32 user4773362user4773362 271 gold badge1 silver badge6 bronze badges 2- @user3064227 helped me to solve issue nr. 3 but I'm still not able to solve the other issues. Can anybody help me? – user4773362 Commented Sep 2, 2016 at 10:02
- I solved issue nr. 2 with the help off css and the nth-last-child selector. – user4773362 Commented Sep 2, 2016 at 11:25
3 Answers
Reset to default 3The 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 ment back you see your question is not answered properly
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();
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.