Automatic Breadcrumb for Jekyll on GitHub Pages

Automatic Jekyll Breadcrumb for GitHub Pages

There are many Breadcrumb Plugins out there but I wanted something that works on GitHub Pages together with jekyll’s safe mode.

Assuming you have the following static page URL structure for all pages (you will need to disable the breadcrumb inside your blog pages).
UPDATE 2015-05-06: You can use markdown files now too.

/page1/index.html
/page1/subpage1/index.md
/page2/index.html
...

You can use the following liquid statement which will render a breadcrumb with url and text from the frontmatter. Make sure all your pages have page.breadcrumb set to the value you want to be shown inside the breadcrumb element.

Example page with frontmatter:

---
layout: default
title: My Java-Page
breadcrumb: Java-Page
---

<div class="container">
  <div class="row">
    <div class="col-md-12">
      peace yo!
    </div>
  </div>
</div>

Now here is the code for the breadcrumb

The output will be a breadcrumb for bootstrap. You will need to style the html with css.

<ol class="breadcrumb">
  <li><a href="/">Home</a></li>
  <li><a href="/page1/">Foo</a></li>
  <li class="active"><a href="/page1/subpage1/">Bar</a></li>
</ol>

You can see a full demo project here: github.com/comsysto/jekyll-breadcrumb-for-github-pages/

Advertisements

10 thoughts on “Automatic Breadcrumb for Jekyll on GitHub Pages

  1. shiftev

    First of all, thank you for the code. Secondly, small problem, rsrs, index.html still shows on the links, even with the correct structure of permalinks. =\

    Reply
  2. Jim Kohl

    Thank you for this nice bit of code, it works well.
    There is an issue I discovered:
    if breadcrumbs are placed at top and bottom of page, bottom breadcrumbs are empty.
    This is due to next_prepender not being initialized the first time through.

    The fix was to include this line @ line 7: {% assign next_prepender = “” %}

    Works like a champ now!
    Thanks,
    Jim

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s