Better Breadcrumbs

A more improved breadcrumbs technique

Previously, we showed you how to put in breadcrumbs in to your site layout. But there was something missing.

Firstly, you might have noticed that you cannot add in parameters for sorting results. Secondly, the crumb for what item you are reading is not really what we wanted as it comes from the URL slug and not the item title.

Let me show you how to fix these two issues.

Adding_ sort parameters

You can add query string parameters through the params parameter (a bit of a tongue twister!). So, for a blog, you will want to sort your results by most recently created in descendin order. Just like this …

1{% breadcrumb params: '?order=c&direction=desc', separator: ' > ' %}

Sorting sorted! Now for a better crumb name …

A better crumb name

By default, the breadcrumb component uses the url to create the name for the last crumb. But what I really wanted was to use item.contents.first.title, which is nicely formatted. What I do is to store the title from the content in to a variable and passing it in as a title parameter.

1{% assign breadcrumb_title = item.contents.first.title %}
2{% breadcrumb params: '?order=c&direction=desc', title: breadcrumb_title %}

There is still one improvement that I can make. What I want is a breadcrumb for when I am on a listing page which has many items and a page showing a single item.

Here is my final blog style breadcrumbs snippet …

1{% if items.size > 1 %}
2  {% breadcrumb params: '?order=c&direction=desc' %}
3{% else %}
4  {% assign breadcrumb_title = item.contents.first.title %}
5  {% breadcrumb params: '?order=c&direction=desc', title: breadcrumb_title %}
6{% endif %}

Now, I have much better bread crumbs. Enjoy.


One of the questions I got was how do I get my breadcrumbs to be multi-coloured. That is just a little CSS trickery. I wrap my breadcrumbs in a container with a breadcrumb class attached and just specify the nth child colours of each link in the container.

 1.breadcrumb {
 2  a {
 3    &:first-child { color: #44afe3; }
 4    &:nth-child(2) { color: #ffc708; }
 5    &:nth-child(3) { color: #e6421a; }
 6    &:nth-child(4) { color: #8cffff; }
 7    &:nth-child(5) { color: #00a3a2; }
 8    &:nth-child(6) { color: #9ac03b; }
 9    &:nth-child(7) { color: #349b46; }
10  }

Update #2

We needed a home button! Oh dear!

OK, so here is what we did. We added a home parameter so that you can add the label for the home page link. If it is left out or blank, there will be no home page link. Here is an update to the bread crumb with a home page link …

1{% if items.size > 1 %}
2  {% breadcrumb home: 'Home', params: '?order=c&direction=desc' %}
3{% else %}
4  {% assign breadcrumb_title = item.contents.first.title %}
5  {% breadcrumb home: 'Home', params: '?order=c&direction=desc', title: breadcrumb_title %}
6{% endif %}

by Craig Sullivan

11 Oct 2013