This project will maintain, as closely as possible, parity with the upstream Bootstrap Framework project's native behaviors in regards to navbar and dropdown menus. It is up to you, the site builder/developer, to create a sub-theme and implement an alternative solution, including the possibility of having to use an external 3rd party plugin to achieve your desired functionality.


Since the creation of this issue and now, 5 years ago (at time of decision), we have all learned quite a bit.

Primarily: there is no shortage of "solutions" available for navigation/menus in Bootstrap 3.

Every "solution" presented here varies drastically. It is typically presented is a biased manner that is based on anything ranging from site design/personal preference to stakeholder requirements.

Everyone wants an "out-of-the-box" solution but considering that navigation/menus are a vital and prominent aspect of a site's identity, we cannot ever hope to even come close to achieving this goal.

This project is a base theme. Its sole purpose is to bridge the "gap" between Drupal and Bootstrap. It cannot and will not be able to provide an out-of-the-box experience for every aspect, every individual or every site.

For more history, please read the comments below in this issue, specifically #88.

Perhaps one day, there may be an ability added that allows for easier additions of third-party plugins, such as #2550491: Create @BootstrapPlugin annotated plugin.

Known Issues

  • No sub-menus - Bootstrap 3 does not include support for menus nested greater than one level deep (e.g. they removed the .dropdown-submenu class that was previously present in Bootstrap 2).

    Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0

    - Mark Otto (Bootstrap Framework author)

  • Does not open on hover - Bootstrap 3 reacts only to intended user interactions such as click events and does not contain hover event support.

    Opening a dropdown is an explicit action and should only happen on click.

    - Mark Otto (Bootstrap Framework author)

  • Main menu item isn't clickable - Bootstrap 3 uses the main menu item as the dropdown toggle in its JavaScript. The easiest solution is to simply create a new "Overview" menu item underneath the main menu item, linking to the same path and place it at the top.

    Because we use a click to trigger the dropdown in most implementations, there is no option for a parent link.

    - Mark Otto (Bootstrap Framework author)

Tutorials/Blog Posts

  • http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/
  • http://www.monolinea.com/responsive-multilevel-menu-with-bootstrap-3/
  • http://webmar.com.au/blog/drupal-bootstrap-3-multilevel-submenus-hover
  • 3rd Party Plugins

    Members fund testing for the Drupal project. Drupal Association Learn more


    h3llomrj’s picture

    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.

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

  • with a submenu but don't take my word on that.
  • Kristina Katalinic’s picture

    Status: Active » Closed (works as designed)

    Hi ukcph_matt and thanks for your response. Since submitting the ticket I actually stumbled upon the stackowerflow thread on the subject of hover dropdowns and the fact click is intentional behaviour. Whilst I can see Mark's point he kinda fails to see what behaviours 99% of web users are used to in terms of menu's. Anyways I found a fix for hover dropdowns but, nothing so far that would make my parent items go where they're supposed to instead of "#".
    In any case great effort on behalf of bootstrap developers as well as, yourself for porting it to Drupal but I don't see it catching on so long as the menu defies general users logic. Perhaps bootstrap develops should consider offering hover menu's with active parent items as an option in the build bootstrap interface.

    just my 2 cents

    robhoward79’s picture

    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!

    Kristina Katalinic’s picture

    Category: bug » feature
    Status: Closed (works as designed) » Active

    what version of Bootstrap are you using because by now the function you are mentioning is called "bootstrap_menu_link" (The twitter part was dropped some time ago) and it looks like this:

    function bootstrap_menu_link(array $variables) {
      $element = $variables['element'];
      $sub_menu = '';
      if ($element['#below']) {
        // Prevent dropdown functions from being added to management menu as to not affect navbar module.
        if (($element['#original_link']['menu_name'] == 'management') && (module_exists('navbar'))) {
          $sub_menu = drupal_render($element['#below']);
        else {
          // Add our own wrapper
          $sub_menu = '<ul class="dropdown-menu">' . drupal_render($element['#below']) . '</ul>';
          $element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
          $element['#localized_options']['attributes']['data-toggle'] = 'dropdown';
          // Check if this element is nested within another
          if ((!empty($element['#original_link']['depth'])) && ($element['#original_link']['depth'] > 1)) {
            // Generate as dropdown submenu
            $element['#attributes']['class'][] = 'dropdown-submenu';
          else {
            // Generate as standard dropdown
            $element['#attributes']['class'][] = 'dropdown';
            $element['#localized_options']['html'] = TRUE;
            $element['#title'] .= ' <span class="caret"></span>';
          // Set dropdown trigger element to # to prevent inadvertant page loading with submenu click
          $element['#localized_options']['attributes']['data-target'] = '#';
     // Issue #1896674 - On primary navigation menu, class 'active' is not set on active menu item.
     // @see http://drupal.org/node/1896674
     if (($element['#href'] == $_GET['q'] || ($element['#href'] == '<front>' && drupal_is_front_page())) && (empty($element['#localized_options']['language']) || $element['#localized_options']['language']->language == $language_url->language)) {
       $element['#attributes']['class'][] = 'active';
      $output = l($element['#title'], $element['#href'], $element['#localized_options']);
      return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";

    Still it would be great to have parents that work and hover submenus. I know bootstrap framework developers don't want it that way but perhaps our own Drupal bootstrap theme developers would consider adding that option because thats how most Drupal menu's work :)

    andregriffin’s picture

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

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


    $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.

    markcarver’s picture

    Category: feature » bug

    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.

    Kristina Katalinic’s picture

    +1 Mark Carver.
    Couldn't have said it better myself! Bootsrap has many advantages but in terms of menu it fails to deliver for average/most/all clients.
    Either get rid of it all together so its more appealing to regular/most/all clients or like you said throw a setting around it.
    Solution https://github.com/CWSpear/twitter-bootstrap-hover-dropdown from #5 looks like it could do the job.

    andregriffin’s picture

    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).

    windmaomao’s picture

    #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 ?


    andregriffin’s picture

    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.

    markcarver’s picture

    @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.

    andregriffin’s picture

    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.

    markcarver’s picture

    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.
    aendrew’s picture

    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.

    markcarver’s picture

    @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’s picture

    @Aendrew and @Mark Carver here is my 2 cents on this becoming a theme setting.
    I've implemented the solution https://github.com/CWSpear/twitter-bootstrap-hover-dropdown originally mentioned in #5 and I have to say its working very nicely for me as it gives me hover dropdowns in desktop and toggle dropdown on mobile and portrait tablet and thats just the perfect balance IMO.
    @Mark Carver I agree with your approach where you're not wanting to make bootstrap feature creep like some of the other Themes but, I do believe that adding https://github.com/CWSpear/twitter-bootstrap-hover-dropdown solution to theme settings is one of those basic features and not an overkill. Incidentally I was a huge Omega fan just like you previously and it was your post http://getlevelten.com/blog/mark-carver/responsive-drupal-theming-done-r... that made me consider Bootstrap. Since then I've tried Radix as well where hover menu's come out of the box but, somehow I kept on leaning towards this Bootstrap project. Menu was certainly not the reason why I favour Bootstrap over Radix even thou hover menu (like most clients want it) out of the box is nice I feel that theme setting with an option to use the solution I tried above has many advantages because it doesn't just add hover effect on Desktops but, it maintains the Toggle on mobiles where its really needed so it definitely wins my vote.
    This is what I did

    function bootswatch_slate_menu_link(array $variables) {
      $element = $variables['element'];
      $sub_menu = '';
      if ($element['#below']) {
        // Ad our own wrapper
        $sub_menu = '<ul class="dropdown-menu">' . drupal_render($element['#below']) . '</ul>';
        $element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
        //$element['#localized_options']['attributes']['data-toggle'] = 'dropdown';
    	$element['#localized_options']['attributes']['data-hover'] = 'dropdown';
    	$element['#localized_options']['attributes']['data-delay'] = '500';
    	$element['#localized_options']['attributes']['data-close-others'] = 'false';

    And what I have now is a nice hover on Desktops and then on mobile devices toggle comes back on for parents so you can navigate to all the children effortlessly and if you actually want to go to the parent menu you just have to click on it again which is what most users would do if it didn't work for them the first time :) The only drawback I can see is if you have a structure like

             |_ Submenu1
                               |_ Submenu2

    Because in that case it is not so intuitive as Submenu1 adapts the same behaviour as top level parent so it kinda forces the user to think he has to navigate down to the deepest level.
    But who has a menu structure like that anyways? Except maybe directories but there the user is likely looking for the deepest level.
    So yeah parents need 2 clicks (touches really). But, what does a regular user do on his touch screen when first touch doesn't produce desired response? He touches again thinking the screen must have not registered the first touch :D

    Kristina Katalinic’s picture

    Ideally thou on mobile devices the toggle would be applied only to <span class="caret"></span> which would get some extra padding on mobiles and that would make mobile navigation very natural and advanced. And for desktops we'd just have the hover effect. Although I am not even sure if thats possible but, just saying it for the sake of all the code wizards on here who would know :)

    markcarver’s picture

    @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.

    markcarver’s picture

    Title: Expanded menu items issue » Add theme setting for Bootstrap drop-down menus
    Category: bug » feature

    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.

    markcarver’s picture

    Issue summary: View changes

    Updated issue summary.

    smartango’s picture

    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

    smartango’s picture

    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>

    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

    tr33m4n’s picture


    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


    markcarver’s picture


    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);
    charlie charles’s picture

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


    voodoodan245730’s picture

    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 () {
    function DropdownToggle() {

    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,

    JadH’s picture

    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.


    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.

    JadH’s picture

    Issue summary: View changes

    Updated issue summary.

    catopuma’s picture

    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.

    Mario Baron’s picture

    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

    ainz’s picture

    @tr33m4n regarding your question


    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


    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.


    JadH’s picture

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

    Danny Englander’s picture

    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.

    Anonymous’s picture

    Thanks voodoodan245730 (comment #25). My steps were similar:

    1. In menu, choose Expanded option for items with sub links.
    2. Add this to template.php in my theme:

    function your-theme_preprocess_page(&$vars, $hook) {
      // Add javascript to trigger bs dropdown. 
      drupal_add_js("jQuery(document).ready(function () { jQuery('.dropdown-toggle').dropdown(); });", 'inline');

    I didn't implement hover since it doesn't help with touch screens.

    Be sure to clear your cache for changes to take effect.

    markcarver’s picture

    Title: Add theme setting for Bootstrap drop-down menus » Refactor navigation/menus
    Version: 7.x-2.x-dev » 7.x-3.x-dev
    Category: Feature request » Task

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

    markcarver’s picture

    hkirsman’s picture

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

    mosesdog’s picture

    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.

    kaido24’s picture

    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);
    Kristina Katalinic’s picture

    @Mark Carver are we getting anywhere with this in 7.x-3.x . I can see that v 7.x-3.1 will be a version with most options enabled from settings page but still no sign of hover or multilevel menu support. I know, I know Bootstrap people are saying multilevel drop downs are complicating things but there is a lot of regular folks who would disagree with them... The original solution almost works in v 7.x-3.x but I believe I've reached the limit of my "skills" to take it any further. Perhaps someone like yourself would have less problems in getting this to work?
    Clickable parent menu items with hover support and multilevel subs?

    markcarver’s picture

    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.

    Kristina Katalinic’s picture

    Good news everyone :)
    I managed to get

    • Hover Dropdown menus
    • Multilevel Sub menus
    • Working (clickable) Parent/Top menu links

    thanks to smartmenus plugin for Bootsrap 3.x and it was really easy to implement. As @Mark Carver pointed out some time ago in #19 no third party allowed in d.o but for those interested in implementing this into their subthemes I wrote a how to guide at http://webmar.com.au/blog/drupal-bootstrap-3-multilevel-submenus-hover
    I've done some considerable testing and it works like a charm on both Desktop and Mobile devices and it actually does more than I was hoping for

    Some of the key features quoted from plugin author's website

    • Optimized for mobile and desktop browsers supporting touch, mouse or both inputs at the same time
    • Section 508 compliant and fully accessible to assistive technology like screen readers
    • Unlimited menu trees on the same page and unlimited sub menu levels supported
    • Horizontal or vertical main menu items arrangement
    • Absolute/relative/fixed positioning for the main menus supported
    • Right-to-left and bottom-to-top display of the sub menus is possible
    • Full support for RTL text/pages (e.g. Hebrew, Arabic)
    • Full window size detection - the menus will always be kept inside the window's boundaries
    • Automatically adjustable width for the sub menus is possible (including min/max settings)
    • Keyboard navigation friendly (Tab key)
    markcarver’s picture

    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?

    Kristina Katalinic’s picture

    @Mark Carver Done! My first documentation edit and 4AM here so I hope, I done it right (feel free to edit if needed).
    Thank you for sticking with this issue all this time, and for converting me to Bootstrap in your blog post few years ago or, should I say ~ 47000 users ago :)

    sonicthoughts’s picture

    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/

    Kristina Katalinic’s picture

    @sonicthoughts as the post mentioned in #40 explains this was only tested with current stable release of Bootstrap 7.x-3.0, once 7.x-3.1 is released I will update my post with new instructions.
    As far as Bootstrap framework is concerned (in theory) plugin itself should work with latest Bootstrap version 3.3.1
    However I did not have the time to test this, so perhaps you could recompile your .css and .js files from 3.3.1 codebase on a non production version of your site and report back with test results.
    Sorry I could not provide you with better answers to your questions at this time :(

    knalstaaf’s picture

    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.

    Kristina Katalinic’s picture

    @Mark Carver I am puzzled which is the most correct way to apply overrides from #40 ?
    Place menu-link.func.php in;
    1. /YourBootstrapSubthemeName/theme/menu/menu-link.func.php which follows the base theme logic or
    2. /YourBootstrapSubthemeName/templates/menu-link.func.php which follows the README.txt provided in templates folder of base theme

    no 1. appears unable to override base theme default

    // Generate as standard dropdown.
          //$element['#title'] .= ' <span class="caret"></span>'; Smartmenus plugin add's caret

    @knalstaaf Yes, the parent menu item has to be set to "Show as expanded" , it wasn't mentioned in the tutorial because its a standard Drupal behaviour. If you don't want to have to set "Show as expanded" all the time I believe Mike Carver posted a solution in one of the earlier comments in this thread.

    knalstaaf’s picture

    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).

    MyriamB’s picture

    #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.

    JakeWilund’s picture

    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.

    kaido24’s picture

    @JakeWilund Did you try #37

    asb’s picture

    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.

    knalstaaf’s picture

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

    asb’s picture

    @knalstaaf: Sure, yes.

    neardark’s picture

    63.42 KB

    @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.

    lunk_rat’s picture

    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 . . .

    kristin.e’s picture

    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.

    knalstaaf’s picture

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

    kristin.e’s picture

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

    sonicthoughts’s picture

    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.

    markcarver’s picture

    Version: 7.x-3.x-dev » 7.x-4.x-dev
    Status: Active » Postponed

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

    GiorgosK’s picture

    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)


    (function ($) {
      $(document).ready(function() {
      });//document ready
      $( window ).resize(function() {
      function BootstrapDropdownToggle() {
        if($('.navbar-toggle').css('display') == 'none'){


    .regularMenu ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;
    ckng’s picture

    (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';
    knalstaaf’s picture

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

    aitala’s picture

    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



    jomarocas’s picture

    @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

    knalstaaf’s picture

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

    sonicthoughts’s picture

    janpan’s picture

    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 ($)
                $(".menu li").hover(
                    function ()
                    function ()

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

    fchandler’s picture

    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.

    knalstaaf’s picture

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

    PascalAnimateur’s picture

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

    knalstaaf’s picture

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

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

    fchandler’s picture

    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/

    Sumit kumar’s picture

    patch for second level menu

    DuneBL’s picture

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

    ipwa’s picture

    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

    markcarver’s picture

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

    Changing to proper branch version for #2554199: [PP-3] Bootstrap 4.

    tyler.frankenstein’s picture

    #68 worked well for me.

    emilflatz’s picture

    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

    Sumit kumar’s picture

    Status: Postponed » Needs review

    Need review #74 patch

    markcarver’s picture

    Category: Task » Plan
    Status: Needs review » Postponed

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

    joelhsmith’s picture

    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.

    kk3829099’s picture

    thanks #68, Its worked for me

    maxplus’s picture


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

    andronic’s picture

    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.

    heddn’s picture

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

    geerlingguy’s picture


    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.

    markcarver’s picture

    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).

    geerlingguy’s picture

    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...

    markcarver’s picture

    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.

    Dana Yousef’s picture

    #82 worked for me , thanks.

    yurg’s picture

    bootstrap-hover-dropdown.min.js mentioned in #82-> #1893532-82: [bootstrap][policy] 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.

    zenimagine’s picture

    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.

    DuneBL’s picture

    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!!!

    zenimagine’s picture

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

    zenimagine’s picture

    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'

    markcarver’s picture

    Title: Refactor navigation/menus » [bootstrap][policy] Navigation/Menus
    Issue summary: View changes
    Status: Postponed » Closed (works as designed)
    Issue tags: -Needs issue summary update

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

    markcarver’s picture

    Update issue summary to further flush out "policy".

    markcarver’s picture

    Issue summary: View changes

    Closing issue