Drupal 7 Path Breadcrumbs Module

By shane
Wed, 2012-10-24 18:52
11 comments
Daily Dose of Drupal Episode #36

If you have used Drupal for awhile, you will undoubtably have run into a fair share of breadcrumb management headaches. I know I sure have. The Drupal 7 Path Breadcrumb module aims to solve that... and it seems to do a great job.

In this episode you will learn:

  • How the Drupal 7 Path Breadcrumbs module helps make managing Breadcrumbs on a Drupal website simple
  • How to create different breadcrumbs to display on different types of node pages using the flexible UI of the Path Breadcrumbs module
  • How to use the configuration options of the Path Breadcrumbs module to change the breadcrumb delimiter and enable RDFa or Microdata support

Welcome to another exciting episode of the Daily Dose of Drupal and oh boy do we have a good one for you today but before we get started you can follow me on Twitter @smthomas, you could also go to codekarate.com and sign up for the codekarate.com newsletter just right here if you’re on the codekarate.com website.

But today we are going over the Path Breadcrumbs Module and as coming from a personal example I’ve struggled with Breadcrumbs on a lot of Drupal 6 sites definitely including a lot of large Ubercart websites, e-commerce websites and they can definitely be a headache and this is a Drupal 7 Module that as far as I can tell seems to solve almost all the problems that I used to have with Breadcrumbs in Drupal 6.

So we’re going to go over just a basic example because this module has a lot of Hidden little features that you can really dig in and spend a lot of time on buy we’re going to go over very simple example here and show you how the Path Breadcrumbs Module can just save you a lot of time and make Breadcrumb management on your site actually bearable.

So on drupal.org it’s path_breadcrumbs and you can see there’s a couple of images here that give you a little bit of brief information on the module and we’ll walk you through different pieces on how to set it up, we’ll go to a very simple example right now. So on my test site I’m going to go ahead and hop down into the command line and go ahead and download the path_breadcrumbs module.
You will need to make sure that you have the C Tools Module installed; if you do not then you’ll have to go ahead and get that installed. So I will scroll down and find the Path Breadcrumbs Module, you can see I do not have the C Tools Module yet so I’ll have it downloaded as well.

And so I’m going to go ahead and enable C Tools Path Breadcrumbs and Path Breadcrumbs UI, so if I refresh this page and come down to the bottom you can see the Path Breadcrumbs UI and the Path Breadcrumbs Module has been both turned on. So one thing you can do that’s really cool with this is it allows you to explore your breadcrumbs and it integrates in the features in C Tools to make it easily transportable and export it between different Drupal websites so that’s of course a plus, we can go over the permissions but we’ll skip that for now and we’ll click right on the Configure.

If you’re familiar with Panels at all you’ll notice that building this out is very similar to how you build out, you know, say in many Panel or even some things within some of the Settings pages within Panels. So it should be somewhat familiar, it’s a pretty usable interface but it should be pretty easy to get the hang off. What it allows you to do is it allows you to set different rules I guess you can say … not technically rules but different selection criteria for when specific types of Breadcrumbs should be displayed on the website.

So in this example let’s consider that maybe we have a somewhat complicated website and wish there’s going to be two sections. We could want maybe a section for Articles and so we have a homepage and then there could be a link to an Articles page which will just be View Listing all the articles on the site and then there could also be … of course the Articles Node page and that’s where were going to want this Breadcrumbs to display.

But we could also have maybe … there’s a Portfolio section so it’s the same thing as a Portfolio link or Portfolio View listing a bunch of Portfolio Content and then the Portfolio Node page. So you could see that on the Articles individual node page we would want that Breadcrumb to link back up to the Articles View.
So I’ll go ahead and show you what the default is here; so I’m going to create a test article, just add some content in there and I’ll save it and notice here’s the Breadcrumb, it just links to the Homepage. Now let’s assume I did have a link that says Articles and it’s just a View Listing all the articles on my site. We want to make sure that anytime we’re on an Article page, the Breadcrumb says Home Articles and then gives us the title of the actual article we’re on.

So how do we do that? Well we are going to use the Path Breadcrumb Module to make that happen; so I’ll come back in to the Configuration page for Path Breadcrumb and we’re going to create a new Path Breadcrumb, we’re going to call this just Articles and now we have to specify the path. If this was one specific page we would just put it in here but in this case we want node/%node and this %node you can think of it as a Placeholder; it allows you to specify a context.
If you’re familiar with Panels and C Tools you’ll know what that means but basically; anytime if we’re on a node/nodeid page which if you come here to this test article you’ll notice this is node/2 so this would match this criteria here, we want this Breadcrumb to be triggered, so we’re going to hit Save.

Now we get to specify what type of context this is and in this case this is going to be a Node, we’re actually on a node page so the type of context is going to be a node. You could build of course Breadcrumbs around comments, files, user names or user entities but in this case it’s going to be a Node ID that’s going to be passed in and what this Node ID is going to allow us to do is it’s going to allow us to pull out different variables from that specific node like the Node Title for instance or the Node URL.

So we’re going to leave this context identifier the same, we’ll hit Finished. So now that we have the arguments selected we’ll hit Continue and now we can select Selection Rules; in this case we only want this to work or this Breadcrumb to show up if it’s on an Article Node page.

So we’re going to look down here and find Node Type, we’re going to click that and click Add and we want the Node Type to be Article. So we don’t want a basic page or a listing node to show this Breadcrumb. And there’s a whole bunch of other types of Selection Rules that you can select from but in this case we’re just going with the Node Type, we’re going to hit Continue and we want to prepend the home link so we want to keep that on there and now we build out the Structure.

The first one we’re going to want is our Articles Listing page and just keep in mind this view doesn’t exist but let’s just assume I created a view or a page that listed all the articles on the site and it was at this article’s path. It doesn’t exist but it’s going to work just fine so we hit Add More and the next piece that we want is we want the actual title of the article to show up.

So we’re going to click on Substitutions and we’re going to scroll down and find %node title which is going to be the title of the node, I’m going to place that in here and for the Path we’re going to go ahead and use None with a little less than, greater than bracket signs there and this is going to show that title but not actually make it linkable, so we’re going to finish this and now you can see we have our one breadcrumb, we can of course add a whole bunch more depending on how bigger sites is going to be but the results are if you come back to the homepage, click on your article, you’ll see the Breadcrumb has now been transformed.
However if you come back to another Content Type you’ll notice that there is not … your Breadcrumb rule is not applying there which makes it very dynamic depending on the different types of content you’re displaying on your site. So what we’re going to go over last just real quickly is we’re going to go over the other configuration options.

So if you come back to the Configure page and you go to Path Breadcrumb settings you’ll notice that you can specify the delimiter so we could make this just a greater than sign here, we can also use Rich Snippets so let’s go ahead and select Micro Data, there’s a couple of other things you can set here; if you want to default the Home Breadcrumb to show up you can give it a title, you can turn it on or off, we’re going to hit Save, you can notice that the Breadcrumbs have already changed up here, if we come back to our test article you’ll notice that there’s a different delimiter here and if we hover over one of the Breadcrumbs you’ll notice you’ll see this items go up, item type Breadcrumb which is the Micro Data that’s been applied to the actual Breadcrumb here.

So as you can see this is an incredibly useful module, I just found out about it, thanks to the recommendation on the codekarate.com website. Someone contact me on the contact form so thank you for that because this is a module that I’m definitely going to be using quite frequently from here and out and I suggest that you give it a try and see what you think.

Thanks for watching the Daily Dose of Drupal and we will be back again tomorrow with another episode, until next time.

5 Secrets to Becoming a Drupal 7 Ninja

Comments

Thanks for nice video. I also think Path Breadcrumbs is very powerful module. It supports any tokens (imagine all the tokens form entity_token module), i18n (since 3.x branch), features and rich snippets.

Great tutorial! Thanks!

I do have a few questions about the module that you may have happened across while testing it out.

-- What happens if multiple rules pass that could technically lead to two different breadcrumb paths?

-- Is there a way to set a fall-back breadcrumb rule when no other rules are in effect?

-- Similar to the last question, is there a way to make a breadcrumb follow the menu structure?

Additional information from the module maintainer (Spleshka):

A new version of path breadcrumbs is in the works, which will provide a more usable interface, a lot of new replacement tokens, improved performance, i18n integration, etc.

thanks to inform us about this great breadcrumbs module and giving a overview how its works..thats a great lesson!
i have used custom breadcrumbs but this makes so mutch more sense! one of the best well written modules for drupal!

thank you very much for the great tutorial.

building breadcrumbs for nodes ist easy to understand and traceable, but how the module works with taxonomy vocabularies and terms ?

I know you mentioned it in the tutorial, but I cant seem to figure out how to get the my breadcrumb to link to my view. but then again I'm really not sure how to go about it. Would I have to add and extra argument or selection rule for the view?

For anyone looking for Node: ID and thinking there is something wrong it is now shown as Content : ID.

Just to point something out: I realized while using this module that if you changed your url path alias, you can't use that alias as the path for the breadcrumb. I made a path alias for all event nodes to be /events/node-title, but I still needed to set the breadcrumb path as /node/%node.

why the breadcrumb only works for pages which are shown in the menu links page? However when I click on any particular product, the left hand products menu collapses and the breadcrumb disappears. There is nothing on Google which tells me anything useful.

Post new comment