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:

  1. Change or remove the default » (») separators
  2. Change the wrapping <div> tag to a different type of element
  3. Wrap each breadcrumb element with a custom tag, such as a <div>, <p>, <li>, etc.
  4. 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

Comments

amysteen’s picture

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

Fr0s7’s picture

 /**
* 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

lelizondo’s picture

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

jdlind38’s picture

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;
}
krisrobinson’s picture

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

bluehead’s picture

It helped me a lot with my issues. Thanks Frost

Danny Englander’s picture

This works great, exactly what I needed!