Theme Drupal Breadcrumbs

Do you ever wish that you could style a specific breadcrumb in Drupal's breadcrumb trail? Well, you can. Drupal's handy theme_ functions allow you to selectively override any function that constructs a themed element.

To theme your breadcrumbs, use the theme_breadcrumb function. Simply add a new function to your template.php following this naming convention: [your_themes_machine_name]_breadcrumb. Take a look at my customized breadcrumb function for the "grasmash" theme. It does the following:

  • Wraps all breadcumbs in a .breadcrumb div
  • Wraps each crumb with a .crumb class
  • Adds .crumb-first and .crumb-last to the first and last crumbs
  • Adds a unique class to each crumb depending on its position

function grasmash_breadcrumb($breadcrumb) {
if (!empty($breadcrumb)) {
$last_crumb = sizeof($breadcrumb);
$crumb_num = 1;
foreach ($breadcrumb as $crumb){
$classes = "crumb crumb-$crumb_num"; //add unique, numbered class to each breadcrumb

if ($crumb_num == 1) $classes.= " crumb-first"; //add unique class to first breadcrumb
if ($crumb_num == $last_crumb) $classes.= " crumb-last"; //add unique class to last breadcrumb

$breadcrumbs[] = ''.$crumb.'';

return '

'; //return breadcrumbs wrapped in a div

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.