Breadcrumbs in Drupal

In this post, we go over manipulating the structure while altering the presentation of breadcrumbs in Drupal Framework

When the task is to update breadcrumbs in Drupal, we try to separate the task into two sub-tasks:

  • Manipulating Breadcrumbs Structure
  • Altering Breadcrumbs Presentation

Manipulate Breadcrumbs Structure

We have found that the best way to manipulate breadcrumbs structure is in the page preprocessor function(in template.php file). Lets, say we need to insert additional item in the breadcrumbs list as the last element as well as add icon img in front of first item:

function THEMENAME_preprocess_page(&$vars, $hook) {
    $node = $vars['node'];
    if (isset($node)) {
        $breadcrumb = drupal_get_breadcrumb();
        $breadcrumb[0] = '<i class="icon-home home-icon"></i>'.$breadcrumb[0];
        $breadcrumb[] = $node->title;
        drupal_set_breadcrumb($breadcrumb);
    }
}

In the line five, the array of breadcrumbs is retrieved. In the line six, we add an icon in front of the first element of the breadcrumbs. In the line seven, we add additional item that is the title of current page at the end for breadcrumbs

A better way to manipulate Breadcrumb structure might be via hook_menu_breadcrumb_alter(&$active_trail, $item) hook as following:

function HOOK_menu_breadcrumb_alter(&$active_trail, $item) {
    
         $end = end($active_trail);
        if ($item['href'] == $end['href']) {
            //the last element is of the current page
            $last = array_pop($active_trail);//store the last temporarily
            $active_trail[] = array(
                'title' => 'Portfolio',
                'href' => base_path().'path/to/portfolio',
                'localized_options' => array(),
            );
            //put back the last element
            $active_trail[] = $last;
        }else{
            $active_trail[] = array(
                'title' => 'Portfolio',
                'href' => base_path().'path/to/portfolio',
                'localized_options' => array(),
            );
        }
}

Here, we first check to see if the laset element of the current breadcrumb trail is for the current page. If so, we store it before putting our own new breadcrumb element ‘Portfolio’. As you see, there is three elements – title, href and localized_options to create new breadcrumb element and by adding to the active trail array, we accomplish the task

Alter Breadcrumb Presentation

One way to alter presentation is int he hook_breadcrumb function(in tempalate.php file)as following:

function THEME-NAME_breadcrumb($variables) {
    $breadcrumb = $variables['breadcrumb'];

    if (!empty($breadcrumb)) {
        $breadcrumbs = '<ul class="breadcrumb">';

        $count = count($breadcrumb) - 1;
        foreach ($breadcrumb as $key => $value) {
            if ($count != $key) {
                $breadcrumbs .= '<li>' . $value . '</li>';
            }
            else{
                $breadcrumbs .= '<li class="active">' . $value . '</li>';
            }
        }
        $breadcrumbs .= '</ul>';

        return $breadcrumbs;
    }
}

We are overriding the bootstrap implementation and updating with our new theme requirements. In line 6, the appropriate class attribute value is added. In lines 14, the separator(‘active’ class) is inserted per our theme design.

Render Breadcrumbs

To render breadcrumbs:

      <?php if (!empty($breadcrumb)): print $breadcrumb; endif;?>

Issues

function drupal_set_breadcrumb() is not defined
This error appear when parameter of the function drupal_set_breadcrumb() is not in a proper format(needs to be array of links)

Leave a Reply

Your email address will not be published. Required fields are marked *