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 …
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.
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 …
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.
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 …