Dynamic breadcrumb based on current page & list using Javascript/jQuery ()
<p>found these two approaches to realize breadcrumbs:</p>

<ul>
<li><a href="https://stackoverflow.com/questions/16416842/jquery-dynamic-breadcrumb">jquery - dynamic breadcrumb</a></li>
<li><a href="https://stackoverflow.com/questions/25844332/dynamic-breadcrumb-based-on-current-page-using-javascript-jquery?rq=1">Dynamic breadcrumb based on current page using Javascript/jQuery</a></li>
</ul>

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

<ol>
<li>it fails if there a serveral pages with the same name</li>
<li>the current page has a link</li>
<li>I would like to remove the first i.e. Home-link</li>
</ol>

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

<p>Thats the code which I took from the other post: </p>

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

<p>The list:</p>

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

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

<p>Thank you very much,
Tobias</p>