You are here

Cool module: Custom breadcrumbs demo

Now that I have this wonderful new blog, I want to help my viewers by letting them know where they are in the hierarchy of my site when they're looking at a particular blog post.  By default, Drupal's breadcrumbs aren't quite as helpful as I'd like as every page has only a 'Home' breadcrumb at the top, since I'm not using the menu system, as much as taxonomy to organize my blog posts.

Here is how you can use the Custom breadcrumbs module to configure how you want your node types, paths, taxonomy and/or views to control the display of breadcrumbs on your site.

By default, if I'm on the 'Administration' term of my 'Blog topic' vocabulary, the only path I see in my breadcrumb is 'Home':

Once you have the module installed, however, you will see it comes with several internal modules depending on what types of site features you want to configure bread crumbs for. 

Enabled the 'Custom breadcrumbs' module, since it is a pre-requisite for all the rest, and any of the below you will need.

  • The 'Custom breadcrumbs API' is a simple API that allows contributed modules to enable custom breadcrumbs for module pages and theme templates.
  • The 'Custom breadcrumbs for panels' provides custom bread crumbs for your panel pages
  • The 'Custom breadcrumbs for paths' will allow you to configure custom breadcrumbs for specific paths on your site
  • The 'Custom breadcrumbs for taxonomy' will allow you to configure custom breadcrumbs when browsing through terms or term lists
  • The 'Custom breadcrumbs for views' will let you create custom breadcrumbs for view pages

For my case, I enabled the paths and taxonomy modules (as well as the default Custom breadcrumbs one of course).  If you only enable the main Custom breadcrumbs module, you'll be able to append the current node's title to your breadcrumb and create breadcrumbs based on node type and menu hierarchy position of your nodes.

Now that they are enabled, let's go to Administration » Configuration » User interface » Custom breadcrumbs configuration to configure some options.

Under the 'Taxonomy structure' section, I enabled the following two options, which were *not* checked by default

  • Show vocabulary in breadcrumb trail
    • Without this option, the parent vocabularly will not be shown when I am on a particular term page
  • Show current taxonomy term in breadcrumb trail on the taxonomy term page

That gets things closer to where I want them to be!  Now when I browse to the 'Administration' term, I do see the parent vocabulary (because of the checkbox above) as well as the current term name I'm on:

The problem is that those breadcrumbs aren't links!  I'd like for a user to be able to click on one of those breadcrumbs to be able to browse around any other terms in the "Blog topic" vocabulary.  To do that, we need to tell the Custom breadcrumbs module what we'd want to link that breadcrumb to:

  • Custom breadcrumbs has a second configuration screen under Administration » Structure » Custom breadcrumbs
  • If you have all the modules enabled as I did, you will see, you have the ability to create breadcrumbs here based on node types, paths, and taxonomy terms (additional options too if you had more of them enabled).
  • Click on the 'Vocabulary' tab and fill in the fields similarly to this
    • Breadcrumb Name: "Blog topic vocab" --> What you see in your admin list of breadcrumbs
    • Vocabulary: "Blog Topic" --> Select the vocabulary you want this to apply to.  This breadcrumb will then appear when you're browsing terms of this particular vocabulary
    • Visibility: leave blank to apply across the board
    • Title: "Blog topic" --> The text that will appear for this breadcrumb
    • Path: "blog-topic" --> This should be a link to the page you want folks to go to when clicking on this breadcrumb (remember how I'm trying to fix the breadcrumbs not being links above?!).  For me 'blog-topic' is the link of a page view I created that lists all the terms in my 'Blog topic' vocabulary


And here is the final result:


Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.