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
Comments
How would you go about giving
How would you go about giving every breadcrumb a unique class? Thanks! This is very helpful <3
How to assign a successive class to each breadcrumb:
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
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:
And my CSS
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
Unordered list with the trailing title
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...
Cool
Thanks, this is great - I also used this code on a recent project.
That is cool piece of code
It helped me a lot with my issues. Thanks Frost
This works great, exactly
This works great, exactly what I needed!
Danny Englander | Twitter | Instagram