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
<?php 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.''; $crumb_num++; } return ''; //return breadcrumbs wrapped in a div } } ?>

Add new comment

Plain text

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