2 min read

Drupal 7: Dropdown link list using CTools

We all use Views and have seen dropdown link lists for various view operations.

Drupal 7 CTools dropdown

CTools template

You can use the capabilities provided by CTools:

$links = array(
  array('title' => t('Content'), 'href' => 'admin/content'),
  array('title' => t('Structure'), 'href' => 'admin/structure'),
  array('title' => t('Modules'), 'href' => 'admin/modules'),
);
print theme('links__ctools_dropbutton', array('links' => $links));

Custom template

To implement a dropdown list of links, define a theming function and its callback:

/**
 * Implements hook_theme().
 */
function ctools_twisty_dropbutton_theme() {
  return array(
    'ctools_twisty_dropbutton' => array(
      'variables' => array(
        'links' => array(),
      ),
    ),
  );
}

/**
 * Theme function for twisty dropdown.
 */
function theme_ctools_twisty_dropbutton($variables) {
  $links = $variables['links'];
  if (count($links) > 1) {
    ctools_add_js('dropbutton');
    ctools_add_css('dropbutton');
  }
  ctools_add_css('button');
  // Unique identifier buttons.
  static $twisty_id = 0;
  $twisty_id++;
  $output = '<div class="ctools-dropbutton ctools-button" id="ctools-button-' . $twisty_id . '">';
  $output .= '<div class="ctools-link">';
  $output .= '<a href="#" class="ctools-twisty ctools-text">' . t('open') . '</a>';
  $output .= '</div>';
  $output .= '<div class="ctools-content">';
  $output .= theme('item_list', array('items' => $links));
  $output .= '</div>';
  $output .= '</div>';

  return $output;
}

Then render the list by passing links to the function:

$links = array();
$links[] = l(t('Content'), 'admin/content');
$links[] = l(t('Structure'), 'admin/structure');
$links[] = l(t('Modules'), 'admin/modules');
print theme('ctools_twisty_dropbutton', array('links' => $links));