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;
}
?>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
-=-=-=-=-=-=-=-=-=-=-
www.twitter.com/amysteen
How to assign a successive class to each 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 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
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
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...
/** 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;
}
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!
High Rock Media | Drupal | WordPress | Photography | Skype: highrockmedia | Twitter |