| 5 theme.inc | theme_breadcrumb($breadcrumb) |
| 6 theme.inc | theme_breadcrumb( |
| 7 theme.inc | theme_breadcrumb($variables) |
| 8 theme.inc | theme_breadcrumb($variables) |
Returns HTML for a breadcrumb trail.
Parameters
$variables: An associative array containing:
- breadcrumb: An array containing the breadcrumb links.
Related topics
File
- includes/
theme.inc, line 1682 - The theme system, which controls the output of Drupal.
Code
<?php
function theme_breadcrumb($variables) {
$breadcrumb = $variables['breadcrumb'];
if (!empty($breadcrumb)) {
// Provide a navigational heading to give context for breadcrumb links to
// screen-reader users. Make the heading invisible with .element-invisible.
$output = '<h2 class="element-invisible">' . t('You are here') . '</h2>';
$output .= '<div class="breadcrumb">' . implode(' » ', $breadcrumb) . '</div>';
return $output;
}
}
?>
Comments
Here is a way to put Breadcrumbs in a UL
Here is something I needed to figure out, and thought I would share:
<?php
/* Put Breadcrumbs in a ul li structure */
function YOURTHEME_breadcrumb($variables) {
$breadcrumb = $variables['breadcrumb'];
if (!empty($breadcrumb)) {
$crumbs = '<ul class="breadcrumbs">';
foreach($breadcrumb as $value) {
$crumbs .= '<li>'.$value.'</li>';
}
$crumbs .= '</ul>';
}
return $crumbs;
}
?>
Breadcrumb as an unordered list with unique and first/last class
I needed a way to add a background image to work as a separator between the breadcrumbs rather than HTML characters so I came up with this using the above example as a starting point.
This allows you to have unique classes such as "breadcrumb-1" and "breadcrumb-2" so you can target the specific list items as well as a "first" and "last" class added to the list items.
Add this to your theme's template.php and theme as needed.
<?php/**
* Output breadcrumb as an unorderd list with unique and first/last classes
*/
function YOURTHEME_breadcrumb($variables) {
$breadcrumb = $variables['breadcrumb'];
if (!empty($breadcrumb)) {
// Provide a navigational heading to give context for breadcrumb links to
// screen-reader users. Make the heading invisible with .element-invisible.
$output = '<h2 class="element-invisible">' . t('You are here') . '</h2>';
$crumbs = '<ul class="breadcrumbs clearfix">';
$array_size = count($breadcrumb);
$i = 0;
while ( $i < $array_size) {
$crumbs .= '<li class="breadcrumb-' . $i;
if ($i == 0) {
$crumbs .= ' first';
}
if ($i+1 == $array_size) {
$crumbs .= ' last';
}
$crumbs .= '">' . $breadcrumb[$i] . '</li>';
$i++;
}
$crumbs .= '</ul>';
return $crumbs;
}
}
?>
Thanks for that - helped me
Thanks for that - helped me out a lot for appending on the current note title. Here is my complete code:
<?php// Ouptuts site breadcrumbs with current page title appended onto trail
function YOURTHEME_breadcrumb($variables) {
$breadcrumb = $variables['breadcrumb'];
if (!empty($breadcrumb)) {
// Provide a navigational heading to give context for breadcrumb links to
// screen-reader users. Make the heading invisible with .element-invisible.
$output = '<h2 class="element-invisible">' . t('You are here') . '</h2>';
$crumbs = '<div class="breadcrumb">';
$array_size = count($breadcrumb);
$i = 0;
while ( $i < $array_size) {
$crumbs .= '<span class="breadcrumb-' . $i;
if ($i == 0) {
$crumbs .= ' first';
}
/* if ($i+1 == $array_size) {
$crumbs .= ' last';
} */
$crumbs .= '">' . $breadcrumb[$i] . '</span> » ';
$i++;
}
$crumbs .= '<span class="active">'. drupal_get_title() .'</span></div>';
return $crumbs;
}
}
?>
$output not being returned with $crumbs
the <h2> is not being returned
needs something like
$output .= $crumbs;
return $output;
That's because
there's a typo in the code:
this line
$crumbs = '<div class="breadcrumb">';should be
$crumbs .= '<div class="breadcrumb">';That line, uncorrected, wipes the earlier assignment of the string and replaces it with the
Page jumps / hash links
Just to add to the above examples, I had a scenario where we were using page jumps as sub menu items, these caused a repeat in the menu, i.e.
Home > Features > Features,
I've added some code that stops this from happening, thought I'd share as may be useful for others, people will need to add in the first and last class code as before (not needed in our implementation)
<?php
function YOURTHEME_breadcrumb($variables) {
$breadcrumb = $variables['breadcrumb'];
$breadcrumb = array_unique($breadcrumb);
if (!empty($breadcrumb)) {
// Provide a navigational heading to give context for breadcrumb links to
// screen-reader users. Make the heading invisible with .element-invisible.
$output = '<h2 class="element-invisible">' . t('You are here') . '</h2>';
$crumbs = '<div class="breadcrumb">';
$array_size = count($breadcrumb);
$i = 0;
while ( $i < $array_size) {
$pos = strpos($breadcrumb[$i], drupal_get_title());
//we stop duplicates entering where there is a sub nav based on page jumps
if ($pos === false){
$crumbs .= '<span class="breadcrumb-' . $i;
$crumbs .= '">' . $breadcrumb[$i] . '</span> > ';
}
$i++;
}
$crumbs .= '<span class="active">'. drupal_get_title() .'</span></div>';
return $crumbs;
}
}
?>
Using a breadcrumb separator
Using a breadcrumb separator image
<?php
function MYTHEME_breadcrumb($variables) {
$breadcrumb = $variables['breadcrumb'];
if (!empty($breadcrumb)) {
// Provide a navigational heading to give context for breadcrumb links to
// screen-reader users. Make the heading invisible with .element-invisible.
$output = '<h2 class="element-invisible">' . t('You are here') . '</h2>';
$breadcrumb_separator = '<span class="breadcrumb-separator"> </span>';
$output .= '<div class="breadcrumb">' . implode($breadcrumb_separator, $breadcrumb) . '</div>';
return $output;
}
}
?>
and css:
.breadcrumb-separator {background:url(../images/separator-image.png) no-repeat center center;
}
Add the page title to the breadcrumb
Add the following function to your theme to add the current page title to the breadcrumb:
function MYTHEME_breadcrumb($variables) {$variables['breadcrumb'][] = drupal_get_title();
return theme_breadcrumb($variables);
}