If we use hierarchical main menu, it's automatically transformed to dropdown menu which is fine but creates following UX problems:

  • If I have "Show as expanded" on top level link disabled I can't see dropdown if I'm on another page with top menu link and I'm therefore unable to use it.
  • If I have "Show as expanded" on top level link enabled I see dropdown from other pages but I can't access page associted with top link directly, as it always triggers dropdown.

The solution would be using http://getbootstrap.com/components/#btn-dropdowns-split.

The result should look similar to http://fortawesome.github.io/Font-Awesome/

Comments

bryandenijs’s picture

You can do this yourselve by overriding the hook_menu_link.
This is my version:

<?php
/**
 * Overrides theme_menu_link().
 */
function MYSUBTHEME_menu_link(array $variables) {
	$element = $variables['element'];
	$dropdown_link = '';
	$sub_menu = '';

	// On primary navigation menu, class 'active' is not set on active menu item.
	// @see https://drupal.org/node/1896674
	if (($element['#href'] == $_GET['q'] || ($element['#href'] == '<front>' && drupal_is_front_page())) && (empty($element['#localized_options']['language']))) {
		$element['#attributes']['class'][] = 'active';
	}

	if ($element['#below']) {
		// Prevent dropdown functions from being added to management menu so it
		// does not affect the navbar module.
		if (($element['#original_link']['menu_name'] == 'management') && (module_exists('navbar'))) {
			$sub_menu = drupal_render($element['#below']);
		}
		elseif ((!empty($element['#original_link']['depth'])) && ($element['#original_link']['depth'] == 1)) {
			// Add our own wrapper.
			unset($element['#below']['#theme_wrappers']);
			$sub_menu = '<ul class="dropdown-menu">' . drupal_render($element['#below']) . '</ul>';
			// Generate as standard dropdown.
			$attributes = array(
				'data-target' => '#',
				'class' => array('dropdown-toggle'),
				'data-toggle' => 'dropdown'
			);

			$dropdown_link = '</li><li' . drupal_attributes($element['#attributes']) . '>' . l('<span class="caret"></span><span class="sr-only">' . t('Toggle Dropdown') . '</span>', $element['#href'], array('attributes' => $attributes, 'html' => true));
		}
	}

	$output = l($element['#title'], $element['#href'], $element['#localized_options']);
	return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $dropdown_link . $sub_menu . "</li>\n";
}
?>

Optionally you can add something like this in your CSS:

@media (max-width: 768px) {
	.navbar-default .navbar-nav a.dropdown-toggle {
		float: right;
		margin-top: -40px;
	}
}
ipwa’s picture

Version: 7.x-3.x-dev » 8.x-3.x-dev

I would also love to see this happen, this would make dropdown menus very user friendly.

ipwa’s picture

ipwa’s picture

Issue tags: -refactor
markhalliwell’s picture

Status: Active » Postponed
prathibha.sn’s picture

@BryanDeNijs : Is this solution applicable even on mobile devices?

Thanks,
Prathibha

prathibha.sn’s picture

Using this solution on mobile devices, on toggle touch only active menu item's sub links are shown but the siblings of active menu items will not be displayed

bryandenijs’s picture

@prathibha.sn I wrote that code 3 years ago for D7. Not sure if it still works with the newest version(s).

markhalliwell’s picture

Status: Postponed » Closed (won't fix)

Please read #1893532: [bootstrap][policy][7.x-3.x] Navigation/Menus, which I've just made a decision on.