MIKESTOWE.COM

you are here

Adding Breadcrumbs in Jekyll

The following code snippet lets you easily add breadcrumbs to your Jekyll version 3+ blog or site.

breadcrumbs_example

The big difference between this snippet, and others is that it does a sanity check to ensure the breadcrumb url exists before adding it. For sites where each directory has an index.md or index.html, this is overkill – but if your site has folders without index files – this will check and then skip that breadcrumb (moving on to the next level up).

It’s also designed to work with Twitter bootstrap (although you can easily create your own breadcrumb class if you’d like).

Note: for large sites (400+ pages), it’s recommended to use a breadcrumb plugin for Jekyll as this will greatly increase compile time.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- START BREADCRUMBS -->
<ol class="breadcrumb">
{% assign crumbs = page.url | remove:'/index.html' | split: '/' | shift | pop %}
{% assign crumbs_version = page.url | split: '/' | first %}
{% for crumb in crumbs offset: 1 %}
{% capture crumb_url %}{{crumbs_version}}{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}{% endcapture %}
{% assign crumb_url_md = crumb_url | append: 'index.md' %}
{% assign crumb_url_html = crumb_url | append: 'index.html' %}
{% assign breadcrumb_exists = site.html_pages | where: "path", crumb_url_md %}
{% if breadcrumb_exists == '' or breadcrumb_exists == nil or breadcrumb_exists.size == 0 %}
    {% assign breadcrumb_exists = site.html_pages | where: "path", crumb_url_html %}
{% endif %}
{% if breadcrumb_exists != '' and breadcrumb_exists != nil and breadcrumb_exists.size > 0 %}
    <li class="breadcrumb-item"><a href="{{site.baseurl}}/{{crumb_url}}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a></li>
{% endif %}
{% endfor %}
</ol>
<!-- END BREADCRUMBS -->

Ps – a big thank you to joosts who’s StackOverflow answer played a key role in building this solution.

Share this Page:
Facebook Twitter Linkedin Reddit Tumblr Email

Leave a Reply

Your email address will not be published. Required fields are marked *