Control Breadcrumbs using Path Breadcrumbs in Drupal 7

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.