Tutorial - How to Work and Style Breadcrumbs in Drupal 7Tutorial - How to Work and Style Breadcrumbs in Drupal 7

Categories:

The little details in your site can make all the difference when it comes down to accessibility and ease-of-use. Breadcrumbs usually fall by the wayside on most Drupal sites because at the default level they barely work. Sure they are great on the admin side but once you set up various content types, views, pages, and contact pages, all of a sudden your breadcrumbs become dumb. They don't know how your pages are linked unless you use "Navigation" or "Main Menu" for everything. And let's face it, often times we use different primary menus and sometimes even separate secondary ones as well.

How do we deal with this issue? Let's review some different modules we can use for breadcrumb wrangling and then tie it up with some different styling ideas.

1. Modules

Menu Breadcrumb:
If ALL of your pages are going to be discreet nodes within the menu system, then this is what you want. It basically takes the default functionality that Drupal provides for the main menu and makes it work for any menu you create, even custom ones. It uses the menu hierarchy to determine the breadcrumb trails. Child nodes will show all of their parent nodes in the trail.


 

There is one major caveat, however, and that is you have to manually add every page to the menu system. You might be thinking this will be no problem, since the "edit" form provides that ability under "menu settings." Well, by default that only provides the ability to add items to the Main Menu tree. Look at the screen below and you will see what I'm taking about. My custom menu called "Some side menu" won't show up.




 

Now, you can configure your content types individually to give make the menu show up in that dropdown, but that opens up more issues. This is a non-ideal solution that will become increasingly difficult to manage if you have multiple admins or change you page URLs or categories. However, for small and medium sites this is a good quick fix that has a couple bonus features as well: adding the page title to the end of the trail, disabling the trail per menu, and hiding the trail when only "Home" would show.


Disable Breadcrumbs:
Granted this module doesn't actually do anything to the trail itself, but as the name suggests, it will allow you to hide the breadcrumb under defined circumstances. It can expose an additional field on the node's edit form which can then be checked to hide the trail on that page.



 

This can be useful for cases where you have a special page that doesn't require the trail, like custom 404 or 403 pages. The module can also disable breadcrumbs for entire paths using the wildcard asterisk on the configuration form, just like you can with block visibility.


Pathauto/Token + Custom Breadcrumb:
Finally, we have the golden module solution for large, content-rich sites. The main issue with Menu Breadcrumb is that it is not practical to add every single node to the menu system, especially if you have a site with hundreds or thousands of nodes. Additionally, for usability sake, generally we want the URL paths to match the breadcrumbs in a 1:1 fashion, which adds an additional level of complexity:


 

Pathauto allows you to set up automatic URL naming for all nodes. You'll no longer have to worry about typing in the full path, you can set up Tokens to replace each address. For instance, maybe you have a content type called "products," you can tell Pathauto to use a URL like products/[product-name]. What if you have product categories or taxonomy? Use something like products/[category]/[product-name]. Once you have that set you can mirror those settings in Custom Breadcrumb. In my example I used 2 taxonomy categories along with a defined path for the first item:


 

Then in my Custom Breadcrumb settings all I needed to do was mirror these:


 

We never have to worry about setting URLs or breadcrumbs ever again. You can configure these to your liking for your own site.


2. Styling

Understanding the base code:
The first step in customizing breadcrumb styling is getting the correct template code. In your template.php file you will want to provide a theme override to start wrangling breadcrumbs. If you don't know what a theme override is, learn more about it here. The code you need for Drupal 7 is this:

 

function yourtheme_breadcrumb($variables) {
  $sep = ' > ';
  if (count($variables['breadcrumb']) > 0) {
    return implode($sep, $variables['breadcrumb']);
  }
  else {
    return t("Home");
  }
}

 
"$sep" is the delimiter. Right now it is set to be a simple "greater than" sign. Lets look at some other symbols we can use and their codes:


Note that not all of these will work with all font sets, but you can switch out the delimiter using those symbols.

If you want a simple text-based breadcrumb then that's as far as you need to go. However, there is a possibility that you want to do something a little more graphical in nature. in that case let's inspect the code that we'll have to work with:


 


Hmm, that's not much to work with. Styling your breadcrumbs in this manner may be impossible without some additional markup. The only way to do this is by adding in a different override function in your template.php file. You may want to modify this for your own purposes but for this tutorial we're going to use a UL, just like we might do for a menu:

 

function yourtheme_breadcrumb($variables) {
   if (count($variables['breadcrumb']) > 0) {
     $lastitem = sizeof($variables['breadcrumb']);
     $title = drupal_get_title();
     $crumbs = '<ul class="breadcrumbs">';
     $a=1;
     foreach($variables['breadcrumb'] as $value) {
         if ($a!=$lastitem){
          $crumbs .= '<li class="breadcrumb-'.$a.'">'. $value . ' ' . '</li>';
          $a++;
         }
         else {
             $crumbs .= '<li class="breadcrumb-last">'.$value.'</li>';
         }
     }
     $crumbs .= '</ul>';
   return $crumbs;
   }
   else {
     return t("Home");
   }
 }

 
This function replaces delimiters with a UL wrapper and then adds LI classes for each item. It uses "breadcrumb-last" as the last class for styling purposes. This should allow us a bit more flexibility with styling.

Lets look at some styling ideas and the code needed to get it done:

Style 1:

 

 #breadcrumb {
   width:924px;
   height:38px;
   background:url(../images/bread1-bg.png);
 }
 ul.breadcrumbs {
   margin:0;
   padding:0;
 }
 ul.breadcrumbs li {
   list-style:none;
   margin:0;
   padding:0 25px 0 15px;
   float:left;
   height:38px;
   background:url(../images/bread1-item.png) center right no-repeat;
   line-height:38px;
   text-transform:uppercase;
   font-size:0.8em;
   text-shadow: 1px 1px 0 #ffffff;
 }
 ul.breadcrumbs li.breadcrumb-last {
   background:none;
   color:#999999;
 }

 


Style 2:

 

 #breadcrumb {
   width:924px;
   height:46px;
   background:url(../images/bread2-bg.png);
 }
 ul.breadcrumbs {
   margin:0;
   padding:9px;
 }
 ul.breadcrumbs li {
   list-style:none;
   margin:0 5px 0 0;
   padding:0 20px 0 10px;
   border-radius: 5px 5px 0px 0px;
   float:left;
   height:28px;
   background:url(../images/bread2-item.png) center right no-repeat;
   line-height:28px;
   text-transform:uppercase;
   font-size:0.7em;
   text-shadow: -1px -1px 0 #000000;
   color:#999999;
 }
 ul.breadcrumbs li a {
   color:#999999;
 }

 


Style 3:

 

#breadcrumb {
   width:924px;
   height:30px;
   background:url(../images/bread3-bg.png);
 }
 ul.breadcrumbs {
   margin:0;
   padding:4px;
 }
 ul.breadcrumbs li {
   list-style:none;
   margin:0 5px 0 0;
   padding:0 10px 0 10px;
   border-radius:10px;
   border:1px solid #dddddd;
   border-bottom:none;
   float:left;
   height:20px;
   background:url(../images/bread3-item.png) repeat-x;
   line-height:20px;
   text-transform:uppercase;
   font-size:0.7em;
   text-shadow: 1px 1px 0 #ffffff;
   color:#999999;
 }
 ul.breadcrumbs li a {
   color:#349ad9;
 }
 ul.breadcrumbs li.breadcrumb-1 {
   background:url(../images/bread3-home.png) no-repeat;
   overflow:hidden;
   border:none;
   padding:0;
 }
 ul.breadcrumbs li.breadcrumb-1 a {
   float:left;
   overflow:hidden;
   width:24px;
   height:0;
   padding-top:21px;
 }
 ul.breadcrumbs li.breadcrumb-last {
   background:none;
   border:none;
 }

 

I hope this gives you some ideas about those tricky little details on your next site.

 

Need a Custom Designed Theme?

If you need a custom designed theme for your business then our designers can work with you to create a unique concept that is consistent with your brand, clearly communicates your value proposition and helps you achieve your goals. >> Click here to contact us and let us know about your needs and we'll analyze and provide you with an estimate for designing and development your custom theme.