How do I change html structure of menu (primary links for example) to my own?

Question

The default HTML structure of the primary links menu is not what I'd like it to be. How can I override it with my own version?

Answer 1

I am assuming you are working with drupal6 and you have basic understanding of variables and arrays. Default html structure of the primary links is formed at different places in drupal. First if you start with the wrapping div id, in your theme's page.tpl.php file where you print $primary_links change it as the following example:

 <div id="dk_one">
 <?php print theme('links', $primary_links, array('class' => 'links primary-links dk_two')) ?>
</div>

In order to change what is in $primary_links use the following code in template.php file of your theme.

    function yourThemeName_links($links, $attributes = array('class' => 'links')) {
  $output = '';

  if (count($links) > 0) {
    $output = '<ul' . drupal_attributes($attributes) . '>';

    $num_links = count($links);
    $i = 1;

    foreach ($links as $key => $link) {
      $class = $key;

      // Automatically add a class to each link and also to each LI
      if (isset($link['attributes']) && isset($link['attributes']['class'])) {
        $link['attributes']['class'] .= 'dk_three ' . $key;
      }
      else {
        $link['attributes']['class'] = $key;
      }

      // Add first and last classes to the list of links to help out themers.
      $extra_class = '';
      if ($i == 1) {
        $extra_class .= 'first dk_four ';
      }
      if ($i == $num_links) {
        $extra_class .= 'last dk_five ';
      }
      $output .= '<li ' . drupal_attributes(array('class' => $extra_class . $class)) . '>';

      // Is the title HTML?
      $html = isset($link['html']) && $link['html'];

      // Initialize fragment and query variables.
      $link['query'] = isset($link['query']) ? $link['query'] : NULL;
      $link['fragment'] = isset($link['fragment']) ? $link['fragment'] : NULL;

      if (isset($link['href'])) {
        $output .= l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment'], FALSE, $html);
      }
      else if ($link['title']) {
        //Some links are actually not links, but we wrap these in <span> for adding title and class attributes
        if (!$html) {
          $link['title'] = check_plain($link['title']);
        }
        $output .= '<span' . drupal_attributes($link['attributes']) . '>' . $link['title'] . '</span>';
      }

      $i++;
      $output .= "</li>\n";
    }

    $output .= '</ul>';
  }

  return $output;
}

Clear your cache and you will see dk_one dk_two dk_four dk_five div ids and classes in your html structure of your primary menu. Please let me know if it works for you.

Answer 2

In drupal 7 it can be found at admin/structure/menu/settings and in Drupal 6 it can be found at admin/build/menu/settings

Answer 3

Take a look at theme_menu_tree, theme_menu_item_link and theme_menu_item. Override these functions in your template.php file.