For accessibility purposes, we need to change the breadcrumbs from div to li. Where do I make this change in the zeropoint theme?

Thanks in advance!

Comments

komal.savla’s picture

Hi,

I am not pretty sure exactly where you want the li tag i.e you want li to the outer div of breadcrumbs or to individual a tag of breadcrumbs.

To add li tag to the outer div of breadcrumbs , You can add the following code in template.php

function zeropoint_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>';
    $lastitem = sizeof($breadcrumb);

     $output .= '<ul><li class="breadcrumb">' . implode(' » ', $breadcrumb).'</li>' .'</ul>';
 return $output;
  }
}

And To add li to individual a tag of the breadcrumbs, You can add this:

function zeropoint_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>';
    $lastitem = sizeof($breadcrumb);
    $output .= '<ul class="breadcrumb">';
    $a=1;
    foreach($breadcrumb as $value) {
        if ($a!=$lastitem){
	  $output .= '<li class="breadcrumb-'.$a.'">'. $value . t(' »') . '</li>';
          $a++;
        }
        else {
            $output .= '<li class="breadcrumb-last">'.$value.'</li>';
        }
      }
     $output .= '</ul>';
    return $output;
  }
}

Thanks,
Komal

tofumidget’s picture

Works fabulously! Thank you, Komal!

florian’s picture

Status: Active » Closed (fixed)

This was fixed in 7.x-1.2 release of ZeroPoint theme.