What are some good ways to implement breadcrumbs on a Jekyll site?

Question

I'm aware that there are single-level breadcrumbs in http://raphinou.github.com/jekyll-base/ but I'm looking for some good ways to have breadcrumbs on a Jekyll site when directories get to a depth of four or five levels.

(Yes, I'm well aware that Jekyll is primarily a blogging engine and that perhaps I shouldn't use it for a general purpose website, especially with many directory levels. I'm also aware of http://octopress.org but haven't found a suitable plugin.)

Based heavily on http://forums.shopify.com/categories/2/posts/22172 I came up with the following Jekyll layout for breadcrumbs, a variation of which you can see in action at http://crimsonfu.github.com/members/pdurbin . You should see the breadcrumbs "home » members »" at the top.

Here's my layout. Yes, it's ugly. I haven't studied Liquid much. Can you suggest a better way?

<html>
<head>
<title>{{ page.title }}</title>
<style type="text/css">
#bread ul {
  padding-left: 0;
  margin-top: 2px;
  margin-bottom: 2px;
} 
#bread ul li {
  display: inline;
  font-size: 70%;
}
</style>
</head>
<body>
<div id="bread">
<ul>

{% assign url = {{page.url}} %}
{% assign delimiter = '/' %}
{% capture allparts %}{{ url | replace: delimiter, ' ' }}{% endcapture %}

{% capture myFirstWord  %}{{ allparts    | truncatewords: 1 | remove: '...' }}{% endcapture %}
{% capture minusFirst   %}{{ allparts    | replace_first: myFirstWord, ''   }}{% endcapture %}

{% capture mySecondWord %}{{ minusFirst  | truncatewords: 1 | remove: '...' }}{% endcapture %}
{% capture minusSecond  %}{{ minusFirst  | replace_first: mySecondWord, ''  }}{% endcapture %}

{% capture myThirdWord  %}{{ minusSecond | truncatewords: 1 | remove: '...' }}{% endcapture %}
{% capture minusThird   %}{{ minusSecond | replace_first: myThirdWord, ''   }}{% endcapture %}

{% capture myFourthWord %}{{ minusThird  | truncatewords: 1 | remove: '...' }}{% endcapture %}
{% capture minusFourth  %}{{ minusThird  | replace_first: myFourthWord, ''  }}{% endcapture %}

{% capture myFifthWord  %}{{ minusFourth | truncatewords: 1 | remove: '...' }}{% endcapture %}

{% if myFirstWord contains '.html' %}
  <li><a href="/">home</a> &nbsp; </li>
{% elsif mySecondWord contains '.html' %}
  <li><a href="/">home</a> &#187; </li>
  {% unless mySecondWord == 'index.html' %}
  <li><a href="/{{myFirstWord}}">{{myFirstWord}}</a> &#187; </li>
  {% endunless %}
{% elsif myThirdWord contains '.html' %}
  <li><a href="/">home</a> &#187; </li>
  <li><a href="/{{myFirstWord}}">{{myFirstWord}}</a> &#187; </li>
  {% unless myThirdWord == 'index.html' %}
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}">{{mySecondWord}}</a> &#187; </li>
  {% endunless %}
{% elsif myFourthWord contains '.html' %}
  <li><a href="/">home</a> &#187; </li>
  <li><a href="/{{myFirstWord}}">{{myFirstWord}}</a> &#187; </li>
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}">{{mySecondWord}}</a> &#187; </li>
  {% unless myFourthWord == 'index.html' %}
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}/{{myThirdWord}}">{{myThirdWord}}</a> &#187; </li>
  {% endunless %}
{% elsif myFifthWord contains '.html' %}
  <li><a href="/">home</a> &#187; </li>
  <li><a href="/{{myFirstWord}}">{{myFirstWord}}</a> &#187; </li>
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}">{{mySecondWord}}</a> &#187; </li>
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}/{{myThirdWord}}">{{myThirdWord}}</a> &#187; </li>
  {% unless myFifthWord == 'index.html' %}
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}/{{myThirdWord}}/{{myFourthWord}}">{{myFourthWord}}</a> &#187; </li>
  {% endunless %}
{% else %}
  <li><a href="/">home</a> &#187; </li>
  <li><a href="/{{myFirstWord}}">{{myFirstWord}}</a> &#187; </li>
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}">{{mySecondWord}}</a> &#187; </li>
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}/{{myThirdWord}}">{{myThirdWord}}</a> &#187; </li>
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}/{{myThirdWord}}/{{myFourthWord}}">{{myFourthWord}}</a> &#187; </li>
{% endif %}
</ul>
</div>
<h1>{{ page.title }}</h1>
{{ content }}
</body>
</html>

Another article on breadcrumbs in Jekyll: http://biosphere.cc/software-engineering/jekyll-breadcrumbs-navigation-plugin — Erlend, Jun 28 '15 at 22:12
Great example and code: https://jekyllcodex.org/without-plugin/breadcrumbs/ — Gabriel Staples, Oct 21 '20 at 07:20

Mr. Hugo · Answer 1 · 2017-11-09T13:00:46.130

21

I have improved slightly on the answers given earlier. I have removed the unordered list and seperated the items with a character (forward slash). I have added a filter for 'index.html' and '.html', so urls like 'mysite.com/path/index.html' and 'mysite.com/path/item-name.html' are also supported. Finally I have capitalized the titles. This results in something that looks like this:

Home / Path / Item name

{% assign crumbs = page.url | remove:'/index.html' | split: '/' %}

<a href="/">Home</a>
{% for crumb in crumbs offset: 1 %}
  {% if forloop.last %}
    / {{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}
  {% else %}
    / <a href="{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a>
  {% endif %}
{% endfor %}

PS. I have created an online resource for snippets like this: jekyllcodex.org/without-plugins

edited Nov 09 '17 at 13:00

answered Aug 14 '15 at 07:04

Mr. Hugo

11,887
3
42
60

1

Thanks! This is clean, simple, and works. I regret that I have but one vote to give (it really deserves more than a few votes here on SO). – SexxLuthor Aug 04 '17 at 14:26
This is awesome. Can we have page title instead of url inside a tags? – Sharath kumar Sep 11 '17 at 03:11
You can, but that would require looping over all pages and match the URL. That makes your build slow(er). I would not do that. – Mr. Hugo Sep 11 '17 at 07:38
1

I have created my own resource for snippets like this: http://jekyllcodex.org/without-plugin/ – Mr. Hugo Oct 16 '17 at 12:56
@JoostS You mention it being possible to loop through the anchors and grab the page.title rather than use the URL. Even with it being slower, how would you suggest to going about it? I imagine one could auto build a JSON file which stores that data and then the breadcrumb pulls from that, but was curious if there was another approach contained within just the `breadcrumbs.html` that I was maybe missing. – ekfuhrmann Dec 20 '18 at 19:25
@ekfuhrmann A bit late... but depending on your page structure you can do something like {% for c in site.pages | where: 'slug',crumb %}, but again, I would not do that. Using the JSON solution is smarter. I use a Liquid replace when this does not work properly (when I have complex page titles), something like: {{ crumb | replace:'your title','Your Title' }}. – Mr. Hugo Oct 13 '20 at 16:14

huon · Accepted Answer · 2013-04-13T00:56:00.103

This should give breadcrumbs at any depth (with a caveat, see end). Unfortunately, the Liquid filters are fairly limited, so this is an unstable solution: any time /index.html appears, it is deleted, which will break URLs that have a folder that starts with index.html (e.g. /a/index.html/b/c.html), hopefully that won't happen.

{% capture url_parts %} {{ page.url | remove: "/index.html" | replace:'/'," " }}{% endcapture %}
{% capture num_parts %}{{ url_parts | number_of_words | minus: 1 }}{% endcapture %}
{% assign previous="" %}
<ol>
 {% if num_parts == "0" or num_parts == "-1" %}
  <li><a href="/">home</a> &nbsp; </li>
 {% else %}
  <li><a href="/">home</a> &#187; </li>

  {% for unused in page.content limit:num_parts %}
   {% capture first_word %}{{ url_parts | truncatewords:1 | remove:"..."}}{% endcapture %}
   {% capture previous %}{{ previous }}/{{ first_word }}{% endcapture %}

   <li><a href="{{previous}}">{{ first_word }}</a> &#187; </li>

   {% capture url_parts %}{{ url_parts | remove_first:first_word }}{% endcapture %}
  {% endfor %}
 {% endif %}
</ol>

How it works is:

separates the URL, ignoring index.html (e.g. /a/b/index.html becomes a b, /a/b/c.html becomes a b c.html),
successively takes and removes the first word of url_parts, to iterate through all but the last word (e.g. it goes a b c.html -> (a, b c.html) -> (b, c.html); then we stop).
at each step, it makes the breadcrumb link using the current first_word, and previous which is all the previous directories seen (for the example above, it would go "" -> "/a" -> "/a/b")

NB. the page.content in the for loop is just to give something to iterate over, the magic is done by the limit:num_parts. However, this means that if page.content has fewer paragraphs than num_parts not all breadcrumbs will appear, if this is likely one might define a site variable in _config.yml like breadcrumb_list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] and use site.breadcrumb_list as the placeholder instead of page.content.

Here is an example (it doesn't use precisely the same code as above, but it's just a few little modifications).

I was having trouble with `page.content` so I defined an array in `_config.yml` as you suggested. Thanks! — Philip Durbin, Mar 10 '12 at 06:26
One nit-pick, this should probably be an `
` since the breadcrumb has a specific order :) http://developers.whatwg.org/grouping-content.html#the-ol-element — imjared, Nov 22 '12 at 08:08
Naming folders as `index.html` sounds like a terrible idea anyway, but thanks for the heads up. — ThisClark, Mar 13 '17 at 19:51

score 3 · Answer 3 · answered Jan 24 '13 at 23:01

I made the following breadcrumbs with liquid templates, its as elegant as I could manage :) It uses jQuery to set the active class on the li last li item.

            <ul class="breadcrumb">
                <li><a href="#"><i class="icon-home"></i>Home</a> </li>
                {% assign crumbs = page.url | split: '/' %}
                {% assign crumbstotal = crumbs | size %}
                {% for crumb in crumbs offset:2 %}
                    {% unless crumb == 'index.html' %}
                        <li><span class="divider">&#187;</span> {{ crumb | remove: '.html' }} </li>
                    {% endunless %}
                {% endfor %}
            </ul>
                            <script>$(".breadcrumb li").last().addClass('active');</script>

score 2 · Answer 4 · answered Dec 11 '13 at 09:55

2

This plugin seems a tad more robust.

answered Dec 11 '13 at 09:55

Daan Reid

339
2
7

Does anyone know if this plugin works for Jekyll 2.3.0? – JCraine Sep 03 '14 at 18:42
1

@JCraine: It does. Updated code a few days ago - now also working with Jekyll posts. – snøreven Sep 08 '14 at 11:12
Excellent! Thanks for taking the time to reply. :) – JCraine Sep 08 '14 at 14:20
I couldn't get this working unfortunately. Adding the code into a plugin.rb causes the build to fail instantly. Anyone else having any luck? – JCraine Oct 14 '14 at 02:50

score 2 · Answer 5 · answered Apr 25 '15 at 08:24

I thought of an automatic breadcrumb also displaying nice breadcrumb element text from the frontmatter.

It works perfectly on GitHub Pages.

Check it out here: http://blog.comsysto.com/2015/04/25/automatic-breadcrumb-for-jekyll-on-github-pages/

If you have this setup:

/mypage1/index.html

---
layout: default
title: My Page 1 - My Homepage
breadcrumb: My Page 1
---
<div class="container">
  <div class="row">
    <div class="col-md-12">
      peace yo!
    </div>
  </div>
</div>

/mypage1/subpage1/index.html

---
layout: default
title: My Sub Page 1 - My Homepage
breadcrumb: My Sub Page 1
---
<div class="container">
  <div class="row">
    <div class="col-md-12">
      foobar!
    </div>
  </div>
</div>

The breadcrumb will render the following

<ol class="breadcrumb">
  <li><a href="/">Home</a></li>
  <li><a href="/mypage1/index.html">My Page 1</a></li>
  <li class="active"><a href="/mypage1/subpage1/index.html">My Sub Page 1</a></li>
</ol>

score 2 · Answer 6 · answered Jul 01 '15 at 16:02

This is how I implemented breadcrumbs in a site I inherited, which is based off some of the other versions here. In our case, some of our folders didn't contain an index.html page. Therefore, clicking on a breadcrumb that linked to a folder with no index.html in it would cause an error. This could have been eliminated with a better file structure, but I wasn't able to change that.

Here is what I came up with.

<ol class="pull-right breadcrumb">
            <li><a href="/">Home</a></li>
            {% assign crumbs = page.url | split: '/' %}
            {% assign crumbs_total = crumbs | size | minus: 1 %}
            {% for crumb in crumbs offset: 1 %}
                {% if forloop.index == crumbs_total %}
                    <li class="active"><a href="{{ site.baseurl }}{{ page.url }}">{{page.title}}</a></li>
                {% else %}
                    {% assign crumb_limit = forloop.index | plus: 1 %}
                    {% capture crumb_url %}{% for c in crumbs limit: crumb_limit %}{{ c | append: '/' }}{% endfor %}{% endcapture %}
                    {% capture crumb_with_index %}{{ crumb_url | append: 'index.html' }}{% endcapture %}
                    {% capture current_page %}{{ site.baseurl }}{{ page.url }}{% endcapture %}
                    {% for p in site.pages %}
                        {% if crumb_with_index != current_page and crumb_with_index == p.url %}
                            <li><a href="{{ crumb_with_index }}">{{ crumb | replace:'-',' ' | capitalize}}</a>
                        {% endif %}
                    {% endfor %}
                {% endif %}
            {% endfor %}
        </ol>

score 2 · Answer 7 · answered May 25 '16 at 22:54

Here's my solution, which works with Jekyll 3.1.3 and GitHub Pages as of today. Like some solutions others have given, it simply inspects the page's URL and builds the breadcrumbs from it.

{% unless page.hide-breadcrumbs %}
  <ul class="breadcrumb">
    <li><a href="/">{{site.title}}</a> </li>
    {% assign crumbs = page.url | split: '/' %}
    {% for crumb in crumbs offset:1 %}
      <li {% if forloop.last %}class="active"{% endif %}>
        {% unless forloop.last %}
          <a href="/{% for crumb in crumbs offset:1 limit:forloop.index %}{{crumb}}/{% endfor %}">
            {{ crumb | capitalize }}
          </a>
        {% else %}
          {{ crumb | capitalize }}
        {% endunless %}
      </li>
    {% endfor %}
  </ul>
{% endunless %}

score 2 · Answer 8 · answered Dec 22 '17 at 17:38

I found an alternative technique that is not entirely automatic but that works on GitHub pages.

It consists of creating a data file with the list of possible paths. For example, here is _data/breadcrumbs.csv for my site:

url,title
/,Home
/api/,API
/api/jsonarray/,JsonArray
/api/jsonbuffer/,JsonBuffer
/api/jsonobject/,JsonObject
/api/jsonvariant/,JsonVariant
/doc/,Manual
/example/,Examples
/news/,News
/faq/,FAQ

Then, a simple loop creates the breadcrumb:

<ol class="breadcrumb">
  {% for crumb in site.data.breadcrumbs %}
    {% assign url_prefix = page.url | slice: 0, crumb.url.size %}
    {% if (url_prefix == crumb.url) and (page.url != crumb.url) %}
    <li class="breadcrumb-item">
      <a href="{{ crumb.url | prepend: site.baseurl }}">
        {{ crumb.title }}
      </a>
    </li>
    {% endif %}
  {% endfor %}
  <li class="breadcrumb-item active">
    <a href="{{ page.url | prepend: site.baseurl }}">
      {{ page.title }}
    </a>
  </li>
</ol>

See this article for details and links to the implementation.

score 1 · Answer 9 · answered Oct 15 '14 at 01:07

1

Thought I might throw this into the mix. This is based on Davelab6's example above, with a few improvements. The active class is set by the last entry in the loop - also contains permalinks for each crumb.

I haven't tested it with posts yet - but it should work. Let me know if any issues.

<ul class="breadcrumbs">
 <li><a href="/">Home</a></li>
 {% assign crumbs = page.url | split: '/' %}
 {% assign crumbs_total = crumbs | size | minus: 1 %}
   {% for crumb in crumbs offset: 1 %}
    {% if forloop.index == crumbs_total %}
        <li class="active">{{ crumb | replace:'-',' ' }}</li>
    {% else %}
        <li><a href="{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}">{{ crumb | replace:'-',' ' }}</a>
    {% endif %}
  {% endfor %}
</ul>

answered Oct 15 '14 at 01:07

JCraine

1,159
2
20
38

Thank you. This one worked for me fine. To improve it, I added `{{ site.url }}` to make sure even GitHub-Pages work. Use it in my theme http://phlow.github.io/feeling-responsive/design/breadcrumb/ – Phlow Feb 25 '15 at 15:56
Nice! I like your theme - kudos for the open source contribution. I've updated my code below, managed to get it even simpler if you want to check it out. – JCraine Feb 26 '15 at 15:00
Nice. Even cleaner and simpler to read and understand. Thank you for letting me know. I updated my code. – Phlow Feb 27 '15 at 16:11

score 1 · Answer 10 · answered Feb 26 '15 at 14:57

I managed to simply it even further. Here is what I'm using now:

{% assign crumbs = page.url | split: '/' %}

<ul class="lv-breadcrumbs">
    <li><a href="/">Home</a></li>
    {% for crumb in crumbs offset: 1 %}
        {% if forloop.last %}
            <li class="active">{{ crumb | replace:'-',' ' }}</li>
        {% else %}
            <li><a href="{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}">{{ crumb | replace:'-',' ' }}</a></li>
        {% endif %}
    {% endfor %}
</ul>

richb-hanover · Answer 11 · 2016-05-23T12:03:38.200

And I have improved JoostS's response to have the following capabilities:

Replace the "/" path separator with a rightward-pointing triangle (▶ ▶)

If one exists, use the breadcrumb: from the front matter of the final page

{% assign crumbs = page.url | remove:'/index.html' | split: '/' %}

<a href="/">Home</a>
{% for crumb in crumbs offset: 1 %}
  {% if forloop.last %}
    {% if page.breadcrumb != '' %}
      &#9654; <a href="#">{{ page.breadcrumb }} </a>
    {% else %}
      &#9654; <a href="#">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a>
    {% endif %}
  {% else %}
      &#9654; <a href="{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a>
  {% endif %}
{% endfor %}

score 0 · Answer 12 · answered Jan 01 '20 at 17:54

Here's another way to approach this: rather than generating the breadcrumbs for a post from its URL, instead use the post's collection, categories, date (year, month and day) and title to form the breadcrumbs. This means that the breadcrumbs don't have to match with the URL (although they can still do if you want them to). And it means that the breadcrumbs for categories, years, etc can find and link to pages for those categories, years, etc if the pages exist.

The generated breadcrumbs look like this:

Home > Posts > Example Category > 2019 > Dec > 23 > Breadcrumbs in Jekyll

There are options for omitting each of the home, collection, categories, date and title components, so you can customize the breadcrumbs to look how you want.

Breadcrumbs will automatically link to a corresponding page, if the page exists. For example the home breadcrumb will link to a page at URL "/". A breadcrumbs for a "foo" category will link to a page at "/foo/" if one exists (otherwise the breadcrumb will just not be linked). A breadcrumb for the year 2019 will link to a "/2019/" page. And so on.

The templates are pasted below. Usage: {% include breadcrumbs.html %}. See my gist and blog post for more detail.

_includes/breadcrumbs.html:

{% assign omit_home = include.omit_home %}
{% if omit_home == nil %}
{% assign omit_home = site.breadcrumbs_omit_home %}
{% endif %}

{% assign omit_collection = include.omit_collection %}
{% if omit_collection == nil %}
{% assign omit_collection = site.breadcrumbs_omit_collection %}
{% endif %}

{% assign omit_categories = include.omit_categories %}
{% if omit_categories == nil %}
{% assign omit_categories = site.breadcrumbs_omit_categories %}
{% endif %}

{% assign omit_date = include.omit_date %}
{% if omit_date == nil %}
{% assign omit_date = site.breadcrumbs_omit_date %}
{% endif %}

{% assign omit_year = include.omit_year %}
{% if omit_year == nil %}
{% assign omit_year = site.breadcrumbs_omit_year %}
{% endif %}

{% assign omit_month = include.omit_month %}
{% if omit_month == nil %}
{% assign omit_month = site.breadcrumbs_omit_month %}
{% endif %}

{% assign omit_day = include.omit_day %}
{% if omit_day == nil %}
{% assign omit_day = site.breadcrumbs_omit_day %}
{% endif %}

{% assign breadcrumbs = "" | split: "" %}

{% if page.url == "/" %}
{% assign is_front_page = true %}
{% else %}
{% assign is_front_page = false %}
{% endif %}

{% unless is_front_page %}
{% assign page = include.page | default: page %}
{% unless omit_home %}
    {% capture breadcrumb_text %}{% include breadcrumb_text.html url="/" default="Home" %}{% endcapture %}
    {% assign breadcrumb_text = breadcrumb_text | split: "" %}
    {% assign breadcrumbs = breadcrumbs | concat: breadcrumb_text %}
{% endunless %}
{% endunless %}

{% unless omit_collection or page.collection == nil %}
{% assign collection_slug = page.collection | replace: " ", "-" | downcase | url_encode %}
{% assign collection_page_url = "/" | append: collection_slug | append: "/" %}
{% capture breadcrumb_text %}{% include breadcrumb_text.html url=collection_page_url default=page.collection %}{% endcapture %}
{% assign breadcrumb_text = breadcrumb_text | split: "" %}
{% assign breadcrumbs = breadcrumbs | concat: breadcrumb_text %}
{% endunless %}

{% unless omit_categories %}
{% for category in page.categories %}
    {% assign category_slug = category | replace: " ", "-" | downcase | url_encode %}
    {% assign category_page_url = "/" | append: category_slug | append: "/" %}
    {% capture breadcrumb_text %}{% include breadcrumb_text.html url=category_page_url default=category %}{% endcapture %}
    {% assign breadcrumb_text = breadcrumb_text | split: "" %}
    {% assign breadcrumbs = breadcrumbs | concat: breadcrumb_text %}
{% endfor %}
{% endunless %}

{% unless omit_date or page.date == nil %}
{% assign year = page.date | date: "%Y" %}
{% assign year_page_url = "/" | append: year | append: "/" %}
{% assign month_int = page.date | date: "%m" %}
{% assign month_page_url = year_page_url | append: month_int | append: "/" %}
{% assign day_int = page.date | date: "%d" %}
{% assign day_page_url = month_page_url | append: day_int | append: "/" %}

{% unless omit_year %}
    {% capture breadcrumb_text %}{% include breadcrumb_text.html url=year_page_url default=year %}{% endcapture %}
    {% assign breadcrumb_text = breadcrumb_text | split: "" %}
    {% assign breadcrumbs = breadcrumbs | concat: breadcrumb_text %}
{% endunless %}

{% unless omit_month %}
    {% assign month_str = page.date | date: "%b" %}
    {% capture breadcrumb_text %}{% include breadcrumb_text.html url=month_page_url default=month_str %}{% endcapture %}
    {% assign breadcrumb_text = breadcrumb_text | split: "" %}
    {% assign breadcrumbs = breadcrumbs | concat: breadcrumb_text %}
{% endunless %}

{% unless omit_day %}
    {% assign day_str = page.date | date: "%e" %}
    {% capture breadcrumb_text %}{% include breadcrumb_text.html url=day_page_url default=day_str %}{% endcapture %}
    {% assign breadcrumb_text = breadcrumb_text | split: "" %}
    {% assign breadcrumbs = breadcrumbs | concat: breadcrumb_text %}
{% endunless %}
{% endunless %}

{% unless is_front_page %}
{% if page.title == nil %}
    {% assign title = page.name %}
{% else %}
    {% assign title = page.title %}
{% endif %}
{% capture breadcrumb_text %}<strong>{{ title }}</strong>{% endcapture %}
{% assign breadcrumb_text = breadcrumb_text | split: "" %}
{% assign breadcrumbs = breadcrumbs | concat: breadcrumb_text %}
{% endunless %}

{% if breadcrumbs != empty %}
<nav style="display: inline-block;">
    {% for breadcrumb in breadcrumbs %}{{ breadcrumb }}{% endfor %}
</nav>
{% endif %}

_includes/breadcrumb_text.html:

{% assign breadcrumb_page = nil %}
{% for page in site.pages %}
{% if page.url == include.url %}
    {% assign breadcrumb_page = page %}
    {% break %}
{% endif %}
{% endfor %}

{% assign breadcrumb_text = breadcrumb_page.breadcrumb_text | default: breadcrumb_page.title | default: include.default %}

{% unless breadcrumb_page == nil %}
<a href="{{ breadcrumb_page.url | relative_url }}">{{ breadcrumb_text }}</a>
{% else %}
{{ breadcrumb_text }}
{% endunless %}
>

What are some good ways to implement breadcrumbs on a Jekyll site?

12 Answers12

Linked