25
.
4
.
2015

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.

github:55a1599eabad95df68ef

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:

github:d5df55fb4bdc4d081942

Now here is the code for the breadcrumb
UPDATE 2016-03-14: The active class is now correctly set on li element.

github:8f7beef9858c1b8625d6

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

github:60245ac79a8277626c7a

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