Is it possible to relocate the navigation buttons? How would I do it?

My goal is to create a little navigation box just below each tab, and place the buttons there where they are more visible.


nedjo’s picture

You have a certain amount of control through CSS but it would be hard to achieve what you're looking for.

silurius’s picture

Yeah, I'm fairly certain that moving them to a position above the tab content is currently not feasible without doing some pretty wonky things with positioning or margins/padding. I'd be very surprised to learn that the buttons are serving anyone especially well right now, given that they are positioned somewhere where they are very likely to be missed.

Anyone up for writing a patch?

silurius’s picture

Possible compromise: What would it take to reproduce at least some of the functionality of the nav buttons for use elsewhere in the content?

(My only real goal here is to provide an easy means of navigating into different tabs from various locations in the content other than the very bottom of the page.)

silurius’s picture


dobe’s picture

Not sure if your still trying to do this but this is what I did.

I wanted to have the ability to create a tabset with the buttons on the top as well as the buttons on the bottom. When I created the tabs programmaticly.

In file. I copied the theme_tabset() function and modified the position of the tabs like so:

 * Return rendered btabset.
 * @themable
function theme_btabset($element) {
  $output = '<div id="tabs-'. $element['#tabset_name'] .'"'. drupal_attributes($element['#attributes']) .'>';
  $output .= '<div class="description">'. $element['#description'] .'</div>';
  if (isset($element['#children'])) {
    $output .= $element['#children'];
  $output .= '<ul class="clear clear-block">';
  foreach (element_children($element) as $key) {
    if (isset($element[$key]['#type']) && $element[$key]['#type'] == 'tabpage') {
      // Ensure the tab has content before rendering it.
      if (
        (isset($element[$key]['#ajax_url']) && !empty($element[$key]['#ajax_url'])) ||
        (isset($element[$key]['#content']) && !empty($element[$key]['#content'])) ||
        (isset($element[$key]['#children']) && !empty($element[$key]['#children']))
      ) {
        $output .= '<li'. drupal_attributes($element[$key]['#attributes']) .'><a href="' . $element[$key]['#url'] . '"><span class="tab">'. $element[$key]['#title'] .'</span></a></li>';
  $output .= '</ul>';
  $output .= '</div>';
  return $output;

Then in tabs.module under the theme hook I added this:

'btabset' => array(
      'arguments' => array('element' => NULL),
      'file' => '',

Then in the function tabs_elements() I added this after $type['tabset']....:

$type['btabset'] = array('#tabs_navigation' => variable_get('tabs_navigation', 0) ? TRUE : FALSE, '#pre_render' => array('tabs_pre_render_tabset'));

Then when I program the tabs using my module I just changed the type from "tabset" to "btabset" then my tabs output below the tabset. This may be a haggard way of doing this but it was quick.. Making this functionality built in to tabs would be nice.