jekyll-breadcrumbs

Overview

Smart and fast breadcrumbs for posts, pages and collections with SEO support and more. Works as Jekyll Hook with Jekyll 3.x.

Features

• Works with posts, pages and collections.
• Breadcrumb title can differ from page title.
• HTML5 compliant and includes a HTML template for quick integration.
• SEO improved, implements Googles RDFA format.
• Works with Pretty Permalinks.
• Option to hides breadcrumbs on root page.
• Supports an icon as root level breadcrumb item.
• Works as Jekyll Hook, does not require an additional Ruby GEM.
• Supports Twitter Bootstrap 4 (works also without Twitter Bootstrap).

Requirements

• Jekyll 3.x

Installation

1. Download the latest release and unpack the file.

2. Copy the content of folder _plugins into the same folder of your Jekyll repository. And copy at least the files nav-breadcrumbs.html, icon.html, icon.svg into your _includes folder.

3. Include nav-breadcrumb.html into your Jekyll code where ever you want to place the breadcrumbs, e.g. within your footer.html by insert this code:

{% include nav-breadcrumbs.html %}

4. Setup Jekyll _config.yml. Copy this YAML code to you _config.yml

breadcrumbs:
  root:
    hide: false  # show breadcrumbs on root/home page
    image: false # Show image or title text

Optional

1. Transfer the example CSS code from nav-breadcrumbs.html into your css file. Modify the css as your like.
2. If you want an icon as root sign in the breadcrumbs modify the file icon.svg.
3. Use YAML title or breadcrumb to define the title of breadcrumb items.

---
title: Legal and Terms
---

or if you want a other text within the breadcrumb as the page title you can achieve this by adding the tag breadcrumb: in your YAML section of the page.

---
title: Legal and Terms
breadcrumb: Legal
---

YAML breadcrumb: is optional and overrules YAML title, in case you want a different title in breadcrumb item as the page title.

Example

If you are interessted how breadcrumbs look like, their is an example site included within folder site.

For Developers

You can use breadcrumbs in your own html code.
A breadcrumb is an array of crumb items within the actual page. Each crumb item represents a page/link and has two properties: url and title.
To get crumb items use liquid in your code:

{% for crumb in breadcrumbs %}
  <a href="{{ crumb.url }}">{{ crumb.title }}</a>
{% endfor %}

Contribution

This Jekyll plugin is an extension of the Simple Breadcrumbs in Jekyll 3 from the envygeeks. Thank you very much envygeeks for sharing the code and thank you for all the Jekyll effort and development. We love Jekyll.

License

See the LICENSE file.