[bootstrap][policy][7.x-3.x] Navigation/Menus

Hey,
Below is a link to one of the founders of bootstrap explaining why bootstrap menus only drop-down on clicks and not hovers. A fairly well reasoned response if you ask me.
http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/

I think to switch it to hover involves replacing data-toggle="dropdown" with data-hover="dropdown" on each

After a lot of looking around I discovered if you can turn the parent links back on.

In twitter_bootstrap/includes/menu.inc There is a function on line 70 called: twitter_bootstrap_menu_link

There are a bunch of commented out lines:

//$element['#localized_options']['attributes']['data-toggle'] = 'dropdown';
//$element['#attributes']['class'][] = 'dropdown';
$element['#localized_options']['html'] = TRUE;
$element['#title'] .= '';

// auch
//$element['#href'] = "";

I just commented out the bottom one and re-enabled this line (I removed the '' bit because I think this is just unnecessary styling):

$element['#title'] .= '';

I now have links that click through and dropdowns that appear on hover :)

I haven't fully tested this, but thought I should share my discovery ASAP. I really hope this helps!

All you need to do is comment out the following lines in menu.inc

$element['#localized_options']['attributes']['data-toggle'] = 'dropdown';

and

$element['#localized_options']['attributes']['data-target'] = '#';

If you're using a subtheme, I believe you could add something like this to your template.php

function bootstrap_subtheme_menu_link(array $variables) {
  unset($element['#localized_options']['attributes']['data-hover'] = 'dropdown';);
  unset($element['#localized_options']['attributes']['data-target'] = '#';);
}

and add the following to your style.css

ul.nav li.dropdown:hover ul.dropdown-menu {
  display: block;
}

ul.nav li.dropdown ul.dropdown-menu { 
  margin-top: 0;
}

Alternatively, there is a plugin for Bootstrap that may handle this functionality.
https://github.com/CWSpear/twitter-bootstrap-hover-dropdown

Personally, I think this should be removed. Or at the very least throw a theme setting around it. I really don't like having to "revert" what the base theme is doing in a sub-theme just to get the "normal" CSS-hoverable expanded menus that most/all client sites require. I kind of consider this more of a feature of Bootstrap than best practices in Drupal. People probably want/expect "normal" menus for their websites. This feature is great if you're building an "application-based" site, but it probably shouldn't be the default.

The reasoning behind no hover is the same reason many people use Bootstrap at all; mobile device support. The hover effect rarely works as expected on touch devices (sometimes it opens the menu, sometimes it loads the link, sometime multiple taps are required to load the parent link-which almost no one will try). The Bootstrap team made a conscious decision to change dropdown behavior in an effort to support touchscreen devices and have consistent behavior across all devices. Regardless of "best Drupal practices", I support this change as a better UI practice.

In general, the worst that will happen is a mouse-input user will click a top-level link, expecting to be taken to some broad category, but instead be presented with a menu of more specific subcategories. I suggest using the Special Menu Items module to build your top-level link of a dropdown to be a <a href="#"> or <span> element. It takes a different approach to structuring your menus, but I support this default Bootstrap behavior. However, a theme setting would be welcome (and the modification to enable hover is quite simple, as #5 shows).

#8, thanks andregriffin, this helps me a lot, i didn't know the special menu item has a setting page :)

after i change <nolink> behavior from <span> to <a href="#">, the menu on the left just doesn't show the special nolink item, it seems the menu just strip out items with <a href="#"> tag. Is this true ?

thanks.

Both the navbar and sidebar menu show items in the menu for me. It does strip out the href="#" and replace with data-target="#", but the items show up and work correctly.

@andregriffin: I understand your reasoning from a better UI standpoint. I would just prefer this to be a theme setting defaulted to disabled. Often times, clients are stuck in the worst practice mode; asking for things that go against "better judgement". They want things like hover-able drop-down menus, slideshows and flashing neon text.

Now, I'm not saying that we shouldn't push for using best practices when possible. What we should do, however, is allow easier implementation only when it's actually needed. This type of feature shouldn't be imposed out of the box. I have to do the following, 9/10, to conform to a set of wire-frames and comps:

/**
 * Override Bootstrap base theme's implementation.
 */
function SUBTHEME_menu_local_action($variables) {
  return theme_menu_local_action($variables);
}

function SUBTHEME_menu_link(array $variables) {
  return theme_menu_link($variables);
}

Personally, I think drop-downs are un-necessary for navigation menus entirely. They complicate things and are often used for site owners (since they know where everything is) than site users.

The reasoning behind no hover is the same reason many people use Bootstrap at all; mobile device support.

Mobile support is built into the nav-bar. It is further enhanced by drop-downs for a toggling effect, but does not require drop-downs to ultimately function.

The Bootstrap team made a conscious decision to change dropdown behavior in an effort to support touchscreen devices and have consistent behavior across all devices.

I think this is often the most confusing and poorest rational behind making the entire menu drop-downs. Drop-downs are meant to be action oriented. You will notice that on http://twitter.com, their entire menu are single items (no drop-downs, evidence for my point above). The only "drop-down" on that menu is for the cog wheel (user profile/settings), which is action oriented. The classes/data attributes to make this happen should be applied to only that menu item, not the entire menu.

In retrospect, I think this issues definitely needs more thought and discussion behind it. Perhaps it shouldn't be all or nothing, but a hybrid of the two. Or perhaps this should be some sort of module enhancement as I mentioned in #1850194-12: Add support for menu block module. Which leads me to think that perhaps the first order of business should be to figure out #1838982: twitter_bootstrap_ui module. Regardless, what this issue really boils down to for me is: leave it up to the sub-theme/themer's choice. Don't impose something that isn't necessarily always wanted/needed.

A possibly wise compromise to keep better touchscreen support AND keep expected menu behavior for mouse users is to enable hover, but still use <nolink> menu items for the top level of a dropdown. That way the only result on a touchscreen device would be opening the dropdown since the parent item won't have an href, and the menu would still open on hover for mouse users.

Thoughts on this? And would it be practical to elegantly provide this as a theme setting, while also suggesting the use of Special Menu Items?

In my case, the majority of the sites I build are enterprise level sites with many pages and destinations, or product oriented sites with many categories. Constraining navigation to what I can fit across the menu horizontally would be impossible, and requiring another page load to load some secondary submenu would be superfluous. But yes, we should consider both use cases. What the default ends up being I suppose should perhaps be geared to the "simpler" type of site configuration.

Clients dictate what get's built. Some clients want the top level item to click-able (usually because it's the landing page). I'm not agreeing with their rational, but ultimately they write the checks. What I'm getting at is:

Menus are a complicated bunch. Every site is different and we shouldn't box ourselves in to any standard (ie: which is ironic in and of itself since this is subjective to say the least). Perhaps it would be better to only provide minimal support and build on top of it what is necessary by providing an elegant theme setting to enable. Am I understanding your correctly?

If you agree, then the actions for this issue should probably be:

1. Wrap the menu alterations in a theme setting, disabled by default.
2. Expand #1856832: Create a documentation section and update the documentation to include different menu configuration use-cases. Listing extra useful modules that will help with this task.

It's easy enough to do either, y'know... Just create a theme settings page and have a toggle for that behaviour. It's like 20 minutes of coding. I'd submit a patch myself if I wasn't so busy right now.

@aendrew: Code isn't the issue. It has more to do with mine, and I'm sure others, caution in preventing yet another feature creeping base theme (like Omega, Zen, AT became). Obviously though, this is one of those cases. I would also really prefer not to add any more dependencies on modules/libraries to accomplish the task at hand.

It really just boils down to the community as a whole deciding the direction on this. @andregriffin and I have discussed it above and seem to have a little difference in opinion; or we did, but came to a conclusion and I am just waiting to hear back. Ultimately though, I still prefer to hear more feedback than just the two of us before we come to a decision on proceeding any further.

Preemptive patches can lead an issue down the wrong road in situations like this, which is why neither of us have posted one yet.

@Kristina Katalinic: I'm not too keen on adding an additional external jquery plugin to the project. For one, it has it's own issue queue and I certainly don't want to maintain it here. It also has no license, which may or may not be an issue in and of itself (pretty sure it has to be GPL2+ to be included with a d.o repo, not entirely sure though). Regardless, it's a jQuery plugin. It should probably go in site/*/libraries instead of the theme. So I think a more acceptable solution would be to provide library support for this additional feature and automatically include it if the library exists. This will avoid having to add another checkbox for this additional feature.

I'll update the issue summary here shortly to reflect what has been discussed thus far.

As I thought and per timplunkett and chx on IRC: no 3rd party anything in a d.o project. sites/*/libraries it is.

Updating title, status and summary to reflect what this issue actually is now.

Updated issue summary.

reading issue and suggested solution and I am experiencing a terrible headache ... w.. what I have to do to disable the dropdown? move it in a block? and styling it as navigation? that's it? not commenting and writing menu.inc, right? this do not change nothing in handset device

thank you to who want to reply

Sorry, what I was really looking for is a way to disable collapse behaviour of navigation, I just removed this from page.tpl.php:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

and removed nav-collapse and collapse from navigation menu block

and solved it. Probably unrelated but this is what I was looking for and maybe someone else lay on this issue for the same reason

Hello,

I was redirected here for help. I want to enable the dropdown subs on my site homepage however by default this is not how it behaves, the dropdown appears after you have visited the parent menu item. Is there a way to do this?

OP https://drupal.org/node/2047661

Cheers

@tr33m4n:

Regarding manually overriding how the menus render see how the base-theme creates them: template.php.

You might want to do something similar to what I do though (it will expand all children (if configured to do so), regardless of active state):

  $primary = menu_tree_page_data(variable_get('menu_main_links_source', 'main-menu'));
  $variables['primary_nav'] = menu_tree_output($primary);

TB Mega Menu is pretty good for most menu cases
it use's the bootstrap frame work too

https://drupal.org/project/tb_megamenu

Comment #5 returns an error.

I fixed this issue by doing two things :

1- Configure your main links to be "Expanded" in Drupal's admin panel
2- Without modifying the Bootstrap base theme, create a custom.js in your sub-theme folder and use the following code :

jQuery(document).ready(function () {
	DropdownToggle();
});

function DropdownToggle() {
jQuery('.dropdown-toggle').removeAttr("data-toggle");
}

This removes the data-toggle attribute from the links.

Then via CSS allow the dropdown-submenu ul to display on hover of the parent link,

the TB Mega Menu is a very nice module.
It is very flexible, however, it seems that it is not working with bootstrap theme.
here is the issue.

https://drupal.org/node/2015515

I think that the best solution for this would be to have TB megamenu working properly with the theme and keep the default settings as they are in basic theme.

I have installed both on a project and trying to figure out why they are not working together.

Updated issue summary.

I agree that TB Mega Menu is a nice module but it has issues and for me is this solutiion not clean enough. It is better use a simple CSS solution and control that over the Template configuration.

TB Menu is a module and the issue is about including hover drop down menus in theme layer so I don't see the the suggestion to use TB Menu as anything else but hijacking the issue and promoting a module which I have not even tried since last time I purchased a TB Theme it sucked so much I stay clear of anything TB

@tr33m4n regarding your question

Hello,

I was redirected here for help. I want to enable the dropdown subs on my site homepage however by default this is not how it behaves, the dropdown appears after you have visited the parent menu item. Is there a way to do this?

OP https://drupal.org/node/2047661

Cheers

The reason this is happening on your homepage is because you haven't enabled "Show as expanded" in your menu item. For each of the menu items that you want to be dropdown menus on the homepage you have to go to Structure > Menus > Main Menu (or whichever menu) > Click on the parent and check the "Show as expanded" checkbox. This issue has nothing to do with bootstrap but rather you just need to enable this setting to fix your issue.

Cheers

@MarioBaron: I apologise if it looked as if I am promoting the module, it was not my intention at all.

I'm building a distro using a Bootstrap subtheme and I really need complete control and customization over the main menu so I grabbed the code from #4 and customized away, it now works perfectly the way I need it to. The way I look at it, Bootstrap is really a builders / themer's theme, so one would expect to have to do some customization and digging into code.

A whole refactoring just needs to happen. Current code is legacy cruft that causes many issues.

This is how I enabled the whole main menu to have submenus

I hope this is the right thread, I've been looking around quite a bit.
I am able to get drop-downs to work on a primary menu structure, but not a menu that runs off the primary but starts with a secondary tree item. Example:
This shows drop-downs:
Sidebar Menu 1

• Page 1
• Page 2
• Page 3

This does not:
Sidebar Menu 2

• Page 1a
• Page 1b
• Page 1b

I hope that makes sense.

Not sure what the problem anymore. I see lots of issues related with adding and removing the navigation.
My problem was I needed to remove submenu navigation. I guess I used some state of dev 7-3.x-dev.

Bootstrap 3 - Remove submenu dropdown if menu name = main-menu

/**
 * Implements theme_menu_link();
 */
function YOURTHEMENAME_menu_link(array $variables) {
  $element = $variables['element'];
  if ($element['#original_link']['menu_name'] = 'main-menu' && isset($element['#below'])) {
    $variables['element']['#below'] = array();
  }
  return theme_menu_link($variables);
}

This issue is no longer about just dropdowns and sub-menus (which are removed and will stay removed, see #2122539-13: Sub menus no longer exist in Bootstrap 3: obsolete code in bootstrap_menu_link) it's about the entire theme function/template override code refactoring now. Unfortunately I have not had the time to work on this particular issue yet.

Thanks @Kristina Katalinic! That's an awesome blog post and you're right on the money. I understand that some people still want this type of menu and this is a good place to reference. Could you add this a resource on https://www.drupal.org/node/2052931?

FANTASTIC. Frankly, it wasn't clear that this was missing in the first place. My vote would be to put this right on the project page!
I'm a system builder, not a developer, and have a couple of related questions:
We have a BS 3.2 code and have been using the beta2 release. Do you expect this will work with beta 2? What about other BS versions? Note there are a lot of browser bugs fixed with more recent BS code (ref: http://getbootstrap.com/browser-bugs/

I followed the steps from the blogpost mentionned in #40 on my 7.x-3.0 installation, but it doesn't seem to work. The problem is that it wouldn't use the overridden menu-link.func.php file. I copied the same structure (mysubtheme/theme/menu) and changed the function name (function MySubthemeName_menu_link(array $variables), emptied the cache.

Edit: solved. When I copy the code from this file to my template.php instead, it works.

Edit 2: The menu wouldn't flyout on hover. Solved: I'm using the minified script (jquery.smartmenus.min.js), so I had to adjust this in my info-file accordingly.

It's possible that the parent menu item has to be set to "Show as expanded" before it works on all pages.

Edit 3:There's an issue when I check Aggregate and compress CSS files in the performance config; my CSS is all gone and the subtheme falls back to the default Bootstrap styles. Solved: Troublemaker is line 100 of jquery.smartmenus.bootstrap.css: .navbar-nav .collapsible ul.sm-nowrap > li > a {white-space:normal;}. When I change this to {white-space:nowrap;}, all seems fine again.

The caret's of the navigation disappear when I submit something, or empty caches. -> Basicly when a message needs to appear on the page (such as "page is saved", or "caches emptied"). Also my jQuery slideshows are gone from the page after the submission.

Simply refreshing the page brings it all back.

I removed the PHP-code mentioned in #40 from the template.php, and then it seems to be solved. Same goes for when I put the very PHP-code back, and disable the (patched) admin menu.

I'm getting this error from the admin when all of the above is enabled:

Error: TypeError: $.browser is undefined
Source: http://domain.com/sites/all/modules/admin_menu/admin_menu.js
Line: 223

So some of these parties are getting into a fight when a submit-action is performed.

This also occurs in Chrome (straight after logging in for instance).

#40 is an excellent solution! Thank you Kristina

But I had a double caret on my submenu item, telling me that menu-link.func.php was not recognized and did not override bootstrap default behaviour as expected.

So I used the function in my subtheme template.php instead of inside the suggested menu-link.func.php, and it works like a charm.

I apologize in advanced if this has been specifically addressed here already, but in regards to menu blocks with expanded menu links, is it possible to disable the dropdown functionality? I'd like to have a more traditional menu block in a sidebar where all menu items are expanded and shown by default, and child links are indented under their parents. Basically, how a menu would appear on a theme like Bartik.

@JakeWilund Did you try #37

I was also looking for a way to enable reasonable dropdown functionality in Bootstrap. For some slightly related reasons I had to upgrade to the current bootstrap-7.x-3.x-dev from 2015-Jan-14 (opposed to the recommended release from 2013-Nov-17). As suggested in #40, I tried to implement the smartmenus plugin.

The result is that submenu's on hover are still not working, but submenu's on click event are gone as well. Bootstrap's primary menu just became a flat menu. Very puristic, the look & feel was a bit like my first baby steps with HTML in the 1990's. Not exactly what I was expecting from bleeding-edge Bootstrap. Lesson learned after spending a cuple of hours: Functionalities like this need to be in the theme itself and have to be tested for compatibility with every release. It's wasted time to work against a framework (intended menu behaviour) and against a Drupal theme at the same time (overriding the theme's implementation of the intended menu behaviour). The workaround from #40 is tested against 7.x-3.0, so it is better only used with 7.x-3.0.

So click on menu it is. If desktop users think the menu is broken because it doesn't hover, we could send them a printed copy of this issue. They would understand. Usability is highly overrated, anyway.

@asb: have you tried the steps I took in #45?

@knalstaaf: Sure, yes.

@asb - I tried the steps in #40 on the latest dev version, and it worked well for me. I've embedded a video gif that demonstrates -- hopefully this is the functionality you're looking for.

Edit: I should note that the cursor is hovering, not clicking above.

I totally agree that hover navs are not a good practice and should be avoided (big touchscreens that do not trigger the collapsed navbar are increasingly common). I also agree with @markcarver that clients want hover-activated dropdowns and you give the client what they want or you risk eviction!

I just wanted to share that I recently worked on a navbar for a client and the design called for hover-activated dropdowns. I was able to talk them out of it using the logic of the Bootstrap project creators! Then I found this thread where the same dynamic played out.

Thanks @Kristina Katalinic for the awesome #40! I will keep it in my back pocket for when I am unable to convince the client otherwise . . .

Thanks @Kristina Katalinic for a great solution. This was all working fine on my dev version of a site I'm developing but when I compress javascript on production site the dropdown function stops working altogether. Has anyone else come across this? It would be great to get a solution for this.

Hi Kristin, sounds familiar to edit 3 of #45.

Thanks @knalstaaf - I did try your fix out but it didn't work for me unfortunately :/

FYI - I'm using suggested fix with 7.x-3.1-beta2+20-dev (2014-Nov-20) and bootstrap v 3.2.0 and have not had a problem. Thanks Kristina.

Given that this will, undoubtedly, be a BC break... I'm going to have to bump this to be addressed in the next major.

here is very easy solution based on #25 no need for external libraries
and works with hover when we have desktop if($('.navbar-toggle').css('display') == 'none'){
and Click otherwise (smaller screens)

.js

(function ($) {
  $(document).ready(function() {
    BootstrapDropdownToggle();
  });//document ready

  $( window ).resize(function() {
    BootstrapDropdownToggle();
  });
  function BootstrapDropdownToggle() {
    if($('.navbar-toggle').css('display') == 'none'){
      $('.dropdown-toggle').removeAttr("data-toggle");
      $("body").addClass("regularMenu");
    }else{
      $('.dropdown-toggle').attr("data-toggle","dropdown");
      $("body").removeClass("regularMenu");
    }
  }
}(jQuery));

.css

.regularMenu ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}

(Looks like it was already suggested earlier in this issue :) )
For menu dropdown on hover, best and easiest integration would be https://github.com/CWSpear/bootstrap-hover-dropdown

Duplicate bootstrap_menu_link() into your theme and add

...
      $element['#localized_options']['attributes']['data-target'] = '#';
      $element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
      $element['#localized_options']['attributes']['data-toggle'] = 'dropdown';
+     // add dropdown hover support
+     $element['#localized_options']['attributes']['data-hover'] = 'dropdown';
+     // make first level menu clickable
+     $element['#localized_options']['attributes']['class'][] = 'disabled';
}

EDIT: #62 doesn't work on iPad for me.

Hm, I'm finding this thread to be a bit confusing.

I'm looking to do the dropdowns but only on a click of the menu item (and not having that link actually be a link) Is this doable with method #63 (which was removed)?

I'm using the 7.x-3.0 version of the Bootstrap theme... and using Special Menu Items...

Note: I did find that setting

// make first level menu clickable
            $element['#localized_options']['attributes']['class'][] = 'enabled';

makes the top menu links not clickable.

EDIT: However, as noted above, this does not work in iOS.

I found my issue with the menu drop downs not being opened by clicks - had the local bootstrap file method mixed with CDN method... seems to break things :D

Thanks,

Eric

@knalstaaf where are the file in bootstrap? i have the problem in bootstrap 1 when i Aggregate and compress CSS files but the js working but no the css, any idea

@jomarocas: it's actually BS3. The mentionned file is dowloaded with smartmenu plugin.

fYI After performing steps in #40: Static/anchored nodes, I have same issue as #65: notify replies to *own* content (nodes, comments)

Anyone looking for a simple solution to just have expanding menu's when hovering over them (with bootstrap 3 subtheme), just add some javascript.

in your template.php

drupal_add_js(drupal_get_path('theme', 'your_theme_folder_name_goes_here') .'/js/menu-hover.js');

Then actually create the above mentioned javascript file, aka your_theme/js/menu-hover.js

Then in that file, add the following javascript:

+(function ($)
{
    $(document).ready(function()
    {
        $(function()
        {
            $(".menu li").hover(
                function ()
                {
                    $(this).addClass("open");
                },
                function ()
                {
                    $(this).removeClass("open");
                }
              );
        });
    });
})(jQuery);

You can expand on the solution, but this works and you still have your mobile functionality.

Updated local dev from bootstrap-7.x-3.0 to bootstrap-7.x-3.1 My sub-theme didn't work WSOD. Created a new subtheme and basically had to import my css code, and things were back to fairly normal. However, I lost this functionality. In the new subtheme #40 and #68 will give me hover expanded submenus, but the top level will not open the linked page. A live site is available, but it has not been updated. http://theochandler.com/ It works as desired. Not really a php programer, but I can hack at stuff. I understand the Bootstrap menu logic, but the client pays the bills.

#68: for some reason it's required to touch the parent item twice (on mobile devices) before it would expand with that approach.

@knalstaaf : Check point #3 on this page http://webmar.com.au/blog/drupal-bootstrap-3-multilevel-submenus-hover
Maybe this could help you...

@PascalAnimateur: thanks, but I was already using that one for my projects ;)

I thought #68 would slim it all down a bit.

Not really sure what I did different from a week ago, but I got #40 to work and the live site is up to date http://theochandler.com/

patch for second level menu

I would be happy to have #40 for Drupal8... (and Bootstrap 3.6)
I have adapted the tutorial, but it is not working...

I think having the split button functionality available for dropdowns would be a big win because you can click on the link and then have the dropdown activate on a separate click but on the same link (button).

Related issue: https://www.drupal.org/node/2244425

Changing to proper branch version for #2554199: Bootstrap 4.

#68 worked well for me.

My use case is on hover show dropdown, and on click go to parent link (client request actually)

For Bootstrap sub-theme solution:

1. download bootstrap-hover-dropdown.js from github
2. add js file to sub-theme via theme info file scripts[] = js/bootstrap-hover-dropdown.min.js
3. in sub-theme's template.php file paste bootstrap_menu_link function from sites/all/themes/bootstrap/templates/menu/menu-link.func.php
4. rename the function to match your sub-theme name (ex. "bootstrap-child_menu_link")
5. comment out or delete the line $element['#localized_options']['attributes']['data-toggle'] = 'dropdown'
6. add line $element['#localized_options']['attributes']['data-hover'] = 'dropdown';

Clear cache and refresh

Note: This use case makes access to sub menu items not mobile friendly so solution would be to put on parent link pages sub menu items in the separate menu and place them into responsive sidebar

Need review #74 patch

The patch in #74 doesn't encompass this entire issue. Also, this issue is really more of a "plan". Many different problems/solutions.

I have a Drupal 8 solution here loosely based on #79. It is the best of all worlds.

a. Makes the top level menu item clickable
b. Makes the the menu hover work
c. Keeps the touch screen dropdown functionality by adding an additional link

1. Create a 'Libraries' folder in your theme to hold bootrap-hover-dropdown Addon
2. Download bootstrap-hover-dropdown.js from github and put it in that 'Libraries' folder
3. In your straff.libraries.yaml file add a link to it under the bootsrap-scripts:
libraries/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js: {}
4. Copy the menu--main.twig template into your 'Templates' folder.
5. On line 44 change the code to add and remove the required attributes to make the hover work. And add an additional button to activate the dropdown.

<li{{ item.attributes.addClass(item_classes) }}>
  <a href="{{ item.url }}" class="dropdown-toggle" data-target="#" data-hover="dropdown">{{ item.title }}</a>
  <a href="{{ item.url }}" class="dropdown-toggle" data-target="#" data-hover="dropdown" data-toggle="dropdown"><span class="sr-only">expand sub nav items</span><span class="caret"></span></a>

The first button works on hover and on click to get to the top level page node.
The second keeps the bootstrap default behavior.

Style to your liking. You will need to edit styles to make the styles pretty (this is in SASS). This is optional:

.navbar-nav > li > a {

  &.dropdown-toggle {
    display: inline-block;
    padding-left: 10px;
    padding-right: 1px;

    &[data-toggle] {
      padding-left: 1px;
      padding-right: 10px;
    }
  }
}

Then you can easily add WCAG/508 compliance:
Add proper focus styles (Bootstrap screws up accessibility in the menu by removing the active state outline for some reason).

// force outline
.nav-bar *:focus {
outline: 5px auto -webkit-focus-ring-color!important;
outline-offset: -2px!important;
}
You could add a few more aria attributes to make it even more compliant.
Works on my screen reader, keyboard-only navigation, and touch screens only navigation.

thanks #68, Its worked for me

Thanks!

also used #68 for a simple single level hover menu solution

I'm stuck on #82 on step 3, I do not find any straff.libraries.yaml in my drupal 8.

I suppose is .yml extension of the file.

I understand this is a plan, but what is it postponed on? Are we waiting for BS4 before starting on this?

@andronic:

I'm stuck on #82 on step 3, I do not find any straff.libraries.yaml in my drupal 8.

That's basically the themenamehere.libraries.yml file—your subtheme should have one, but replace themenamehere with your theme's machine name.

Also, I second @heddn's question—is this not something that will be considered for 3.x? I was kind of amazed this isn't something easily configurable in Bootstrap, as I don't think I've built a site (or used a site) in the past few years that didn't explicitly require dropdown-on-hover for desktop behavior.

This isn't so much postponed on BS itself, but rather on figuring out how to deal with multiple ideas/types of configuration in this base theme to begin with.

I'd say that, if anything, this is realistically "postponed" on simply attempting to figure out just what to do...

The reality is this: yes, many want hover support, but the BS framework does not (out-of-the-box) support this.

This alone is the primary hinderance to any progress on this issue. I do not, nor will I, continue down the path of adding custom CSS/JS to handle this.

A prime example of why this shouldn't happen is the custom "Anchor" JS that was added to the base theme (and then subsequently removed) because of all the issue it ultimately caused: #2462645: Create @BootstrapPlugin for "bootstrap-anchor".

The other reason this issue has stagnated is because, quite frankly, hover menus do not work for mobile.

This isn't "my opinion". This is just a fact.

Developing technologies have forced how we [should] think about menus drastically.

Ultimately, this is what caused the BS framework to remove the support for sub-menus in dropdowns (never mind the fact there was never any support for hover in the first place).

---

What is my opinion is that I believe people are naturally abhorrent to change (of any kind). People are used to hovering menus. People want to continue coding entire sites into their navigations and making them 10 miles long so attempting to find anything is, in itself, a chore.

If you don't have simple navigation, you're just plain doing it wrong. I get that not everyone can push back with this kind of logic, especially if there are clients/stakeholders involved. That is why I, ultimately, feel this topic should always be handled on a per site basis.

The base theme gives you just that: a base to go off of.

Is it perfect, no.

Is it going to check every box on your "need" list, no.

Are there are external libraries that supplement this "desired feature", yes.

But that's what they are: external libraries. Something that should be implemented on a per site/sub-theme implementation.

Not everyone is going to need (or want) this kind of support.

Just like you all feel that you're being "forced" to deal with a rudimentary dropdown menu, imposing any kind of "plugin" for all will be just as equally frustrating.

The reality is: menus are, inherently, always unique. No one site/developer will have the same navigation needs as another. This is just another reason why this issue has stagnated over the years.

There is no "one size fits all" solution here.

---

That all being said:

I will, officially, postpone this issue on the following parent issue. I doubt anything at all will be able to happen until we can at least implement a proper 3rd-party plugin system.

As far as 7.x-3.x goes, that ship has sailed (long ago). Anything introduced here will cause severe BC breakage, which is another reason this issue has stagnated BTW. This kind of change will only happen in newer code (especially one that can handle plugin discoveries/integrations more easily: 8.x).

Sounds good, and I 100% agree on the topic of simple navigation. I have 7 or fewer links in the main nav for any site where I have say over navigation. It's just (sadly) politically impossible to make that happen on almost any site I've ever built for small/medium/large business sites, nonprofits, etc., because they all want to stick every page on the site into a menu somewhere (because everything's so important :P).

But information architecture aside, what if there's a documented way in the docs site to enable hover menus in sub themes, and it's just not baked into the theme itself? I'm working on it now, and could maybe send a patch over for the docs...

what if there's a documented way in the docs site to enable hover menus in sub themes, and it's just not baked into the theme itself?

Generally speaking, this project doesn't document "how-to" scenarios as that's what forums and stackexchange is for IMO.

What it does document is the APIs and theme settings it creates and how to use them.

I think the most I'd be willing to commit is just a simple FAQ about this topic and simply link to this issue. Maybe explaining that this project differs slightly in that it themes, out-of-the-box, simple dropdown menus (1 level deep) due to a Bootstrap Framework limitation.

Anything that deviates from that will require a sub-theme override of the menu theme [preprocess] functions/templates. I just don't want to get into details (especially on code) as that can change and become extremely stale over time.

Hi Guys

Bootstrap menu hover effect solution is simple , just add below mention css .

File Edit Options Buffers Tools Help
ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;
}

ul.nav li.dropdown ul.dropdown-menu {
margin-top: 0;
}

and its works !

bootstrap-hover-dropdown.min.js mentioned in #82-> #1893532-82: [bootstrap][policy][7.x-3.x] Navigation/Menus haven't worked for me (known issue with Windows 8 & Chrome ) so I've used this library instead: https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover. As a bonus, no need to alter twig menu template, just add something like jQuery('#MENU-SELECTOR').bootstrapDropdownHover(); into theme's custom JS file.

Would you have a patch to activate the menu (this discussion is a mixture of drupal 7 and drupal 8) ?
The explanation is complicated.

I do not understand why this was deleted. The menu does not work and the buttons do not work anymore.

I first tried #93, but the hover was not working on ubuntu/firefox (it was ok on ubuntu/chrome)... and more important, the link when clicking on the top item (with the arrow) was not working too.

Thus, I tried #82, and everything is fine!!!

I managed to run 82 for the menu, but the drop down did not work :(

For those who want to activate the drop-down menu with the click, just comment or delete the following line in subtheme.libraries.yml :

scripts[] = 'bootstrap/js/dropdown.js'

I am closing this issue and turning it into a policy issue. I have updated the title and issue summary to reflect as such.

Update issue summary to further flush out "policy".

Closing issue