Implementing breadcrumbs in Drupal can be difficult depending on your requirements. Drupal out of the box will generate a breadcrumb based off the menu structure, however, things start to get a little tricky when you want to modify breadcrumbs.
There are a lot of modules that allow you to control breadcrumbs in their own unique way. To name a few you have Crumbs, Custom Breadcrumbs and more.
The module that I’ve had the most success with is the Path Breadcrumbs. This module offers great flexibility with an easy to use interface. Path Breadcrumbs’ configuration can also be exported using Features which is another huge win.
How it Works
The module uses the Ctools access plugin, which allow users to define selection rules. You can setup rules which could be, “only show if the content type is an article”. You can add as many selection rules as required and can even reorder the list and change the execution order.
In this tutorial, you’ll learn how to customise breadcrumbs on the Article content type and how to change the breadcrumb when using the Book module. And before you say anything, yes the Book module still gets used.
Get Started
Before we can begin, go download Path Breadcrumbs and its dependencies: Entity API, Entity Token (part of Entity API) and Ctools
Once everything has been downloaded, enable Path Breadcrumbs and Path Breadcrumbs UI.
If you use Drush, run the following command:
drush dl path_breadcrumbs entity ctools drush en path_breadcrumbs_ui path_breadcrumbs
On Content Type Pages
A common use case is to have an index page appear in the breadcrumb, for example, “Home > Blog > TITLE”. Often you’ll want an article to link back to an index page which could be /blog or /articles.
Let’s now configure the breadcrumb on an article page to always show “Home > Blog > TITLE”.
1. Go to Structure, “Path Breadcrumbs” and click on “Create new path breadcrumb”.
2. Enter in “Article content type” into “Breadcrumb definition” and “node/%node” into Path. Click on Continue to go to the next page.
3. On the Arguments page, click on Change next to “No context assigned” and select “Node: ID” from the modal pop-up and click on Continue, then Finish.
Can’t see “Node: ID”?
If you see “Content: ID” instead of “Node: ID”, then select “Content: ID”.
Once back on the Arguments page click on Continue.
4. On the “Selection rules” page, you define your selection criteria. Because we want to use this breadcrumb on the Article content type, we’ll set that as a selection criteria.
Select “Node: type” from the drop-down and click on Add.
Select Article from the modal pop-up and click on Save.
Once you’ve added the selection criteria click on Continue.
5. Now at this point we define our actual breadcrumb. As mentioned earlier, we want the breadcrumb to be “Home > Blog > TITLE”.
Add Blog into the first link title and blog
into the link path. Click on “Add more” to add another row. Now in the second row enter %node:title
in the link title and <none>
in link path.
Once complete the page should look like the image below:
Now click on Finish.
Test Breadcrumb
Congratulations, you’ve created your own custom breadcrumb. Let’s test it out and make sure it’s working.
Go ahead and create an article and once it’s created you should see “Home > Blog > TITLE”.
On Book Pages
The Book module, which ships with Drupal, allows you to create book style pages with chapters.
Out of the box Drupal will show all parent pages in the breadcrumb, for example, “Home > Book name > Chapter > Page”. It starts to get a little difficult when you want to customise the breadcrumb. Let’s say you want to add a “Books” link just after “Home” so it’s “Home > Books > Book name > Chapter > Page”.
Now let’s customise the Book module’s breadcrumb.
To speed things up, I’ll assume you’ve already installed the Book module and created content. I’ll also assume that you’ve already created a “Book content type” breadcrumb and we’ll jump straight to the Breadcrumbs page.
Configure Book
We’ll be using functionality in Path Breadcrumbs to add the book menu trail. The module implements a custom magic token called “pb-join”. For this token to work you must install and enable the Token module.
1. In the row enter “Books” in link title and books
in link path.
2. In the second row enter “%node:book:pb-join:name” in link title and “%node:book:pb-join:url” in link path.
3. Once done click on Finish.
Now head over to one of the book pages and you should see a link “Books” just after the “Home” link.
Summary
I’ve tried a few of the breadcrumb modules out there, but I found Path Breadcrumbs easy to use and pretty flexible. If you need to heavily customise the breadcrumb then you can via some Ctools access plugins.
FAQ
Q: I get JavaScript errors when creating a breadcrumb.
There is some compatibility issues with jQuery Update module. The current workaround is to disable jQuery Update when using the module.
Q: The “pb-join” magic token doesn’t work.
This magic token requires the Token module to be setup and installed.
The module allows to extend configuration and actions for every variant by hooks. So it’s possible to add such things as highlighting the configured menu item when the particular breascrumbs are shown:
https://www.drupal.org/node/1946760
Hey Ivan!
Nice article! I’ve written about custom breadcrumbs back in august. Using configuration gets you quite far, but I’ve had too many use cases where all kinds of weird exceptional logic is requested.
So. Here’s my take on this: http://www.colada.be/taming-drupal-breadcrumbs.html
Thanks for the great write up!
Some logic can be difficult to implement using a module. Sometimes it’s easier to write a bit of code.
Thanks for the link.
Thanks for the link.
Hello.
Thank you for this guide, but the ‘change’ button under context assign does not appear for me. Instead it direct me on the next page on selection rules when I click on continue. So I cant seem to be able to choose arguments.
I have all required modules installed.
Any help would be appreciated.
Are you running jQuery update and getting JavaScript errors on the page?
There’s an issue where Path breadcrumbs doesn’t work well with jQuery 1.9 and above. (https://www.drupal.org/node/2066223)
I am not sure what jQuery is, but I do not get any JavaScript errors on the page. Arguments are just not there.
Any ideas on what to do next?
Sorry don’t know what else it could be.
I want to add a custom value in between taxonomy breadcrumbs i.e. normally parent taxonomy terms get displayed as breadcrumbs. I want to add a term and a link for it in between these atxonomy terms. How can I do that?
Look at creating a custom token (https://www.drupal.org/node/1308488), and then add that to the breadcrumb.
Does it have Translation and RTL support – for languages like Arabic?
I don’t know.
I’ve never setup translation or RTL.
Rockstar. Thanks for such clear and thorough tutorials Ivan. Such an amazing resource.