Last updated August 23, 2009. Created by Fr0s7 on November 26, 2008.
Edited by SLIU. Log in to edit this page.

To theme the generated HTML of breadcrumbs in Drupal 6.x, the simplest method is to override the breadcrumb() function by creating a theme_breadcrumb() function of your own, where 'theme' is replaced by the name of your custom theme. For example, if you are using the Garland theme, you would rename this function garland_breadcrumb().

Reasons you might want to change the output HTML:

  • Change or remove the default » (») separators
  • Change the wrapping <div> tag to a different type of element
  • Wrap each breadcrumb element with a custom tag, such as a <div>, <p>, <li>, etc.
  • Change or add a class to a specific element in the breadcrumb array

In the example below, I:
- Iterate through each element of the $breadcrumb array
- Wrap the output of each breadcrumb element in a <p> tag
- Assign the last element of the array (representing the current page) a special class called 'breadcrumbcurrent'

Step1

To do this, simply copy and paste this code into your template.php file, and change the theme_breadcrumb() function name to [yourcustomtheme]_breadcrumb():

<?php
/**
* Allow themable breadcrumbs
*/
function theme_breadcrumb($breadcrumb) {
  if (!empty(
$breadcrumb)) {
   
$lastitem = sizeof($breadcrumb);
   
$crumbs = '<div class="breadcrumbs">';
   
$a=1;
    foreach(
$breadcrumb as $value) {
        if (
$a!=$lastitem){
        
$crumbs .= '<p>'.$value.'</p>';
        
$a++;
        }
        else {
           
$crumbs .= '<p class="breadcrumbcurrent">'.$value.'</p>';
        }
    }
   
$crumbs .= '</div>';
  }
  return
$crumbs;
}
?>
NOTE: The function itself is all that should be copied. Do NOT include the opening or closing <?php tags when pasting into your 'template.php' file.

Step 2

Save and upload your template.php file to the directory where [yourcustomtheme] resides. If you are following Drupal 6 conventions, that directory is sites/all/themes/[yourcustomtheme].

Step 3

Clear your cached data by clicking on the Clear cached data button near the bottom of the 'Performance' page, located at Administer » Site Configuration » Performance.

Good luck!
- Frost

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

How would you go about giving every breadcrumb a unique class? Thanks! This is very helpful <3

<?php
/**
* Allow themable breadcrumbs
*/
function theme_breadcrumb($breadcrumb) {
  if (!empty(
$breadcrumb)) {
   
$lastitem = sizeof($breadcrumb);
   
$crumbs = '<div class="breadcrumbs">';
   
$a=1;
    foreach(
$breadcrumb as $value) {
        if (
$a!=$lastitem){
        
$crumbs .= '<p class="breadcrumblevel'.$a.'">'.$value.'</p>';
        
$a++;
        }
        else {
           
$crumbs .= '<p class="breadcrumbcurrent">'.$value.'</p>';
        }
    }
   
$crumbs .= '</div>';
  }
  return
$crumbs;
}

?>

You'll notice that I simply added a CSS class and the array counter $a into the output string, so that each successive breadcrumb has a class of breadcrumblevel1 ... breadcrumblevel2 ... breadcrumblevel3 ... and so on.

Good luck!
- Frost

This is really cool Frost, I modify it because I didn't want to have

and also I added a space between the span. This is my code:

function phptemplate_breadcrumb($breadcrumb) {
if (!empty($breadcrumb)) {
    $lastitem = sizeof($breadcrumb);
    $crumbs = '<div class="breadcrumbs">';
    $a=1;
    foreach($breadcrumb as $value) {
        if ($a!=$lastitem){
         $crumbs .= '<span class="breadcrumb-'.$a.'">'. $value . ' ' . '</span>';
         $a++;
        }
        else {
            $crumbs .= '<span class="breadcrumb-last">'.$value.'</span>';
        }
    }
    $crumbs .= '</div>';
  }
  return $crumbs;
}

And my CSS

.breadcrumb span.breadcrumb-last {
  font-family:Trebuchet MS;
  font-size:24px;
  color: #ff3300;
}
.breadcrumb span.breadcrumb-last a {
  font-family:Trebuchet MS;
  font-size:24px;
  color: #ff3300;
}
.breadcrumb span.breadcrumb-2 a {
  color: #535353;
  font-family:Trebuchet MS;
  font-size:24px;
}
.breadcrumb span.breadcrumb-1 a {
  color: #abaaaa;
  font-family:Trebuchet MS;
  font-size:24px;
}
.breadcrumb span a:hover {
  text-transform: none;
  text-decoration: none;
  color: #ff3300;
}

I don't exaggerate if I say that I been looking for something like this for almost 3 weeks now. I think your comment should be moved to a new child page with a more descriptive title.

Thanks a lot.

Luis

I wanted my breadcrumbs in a list with the title as an inactive link at the end. So I tweaked the code up above to the following...

/** Overrides the breadcrumbs
*/
function phptemplate_breadcrumb($breadcrumb) {
if (!empty($breadcrumb)) {
    $lastitem = sizeof($breadcrumb);
    $title = drupal_get_title();
    $crumbs = '<ul class="breadcrumbs">';
    $a=1;
    foreach($breadcrumb as $value) {
        if ($a!=$lastitem){
         $crumbs .= '<li class="breadcrumb-'.$a.'">'. $value . ' ' . '</li>';
         $a++;
        }
        else {
            $crumbs .= '<li class="breadcrumb-last">'.$value.'</li><li class="end">'.$title.'</li>';
        }
    }
    $crumbs .= '</ul>';
  }
  return $crumbs;
}

Thanks, this is great - I also used this code on a recent project.

It helped me a lot with my issues. Thanks Frost

This works great, exactly what I needed!