Bulma: Bulma dropdown opening require javascript?

[gdvallance]

This is about the Docs.

Overview of the problem

This is possibly about the Bulma Docs

I'm using Bulma version [0.7.1]
My browser is: Firefox 59.0.3 (64bit) & Chrome 66.0.3359.139 (Official Build) (64-bit)

Description

Example code in the documentation for dropdown see: https://bulma.io/documentation/components/dropdown/ does not work for me out-of-the-box.

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
      <span>Content</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu2" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
      </div>
      <hr class="dropdown-divider">
      <div class="dropdown-item">
        <p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
      </div>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        This is a link
      </a>
    </div>
  </div>
</div>

Specifically, the dropdown box (button) does not open with the contents when left-clicked with my mouse.

Googling around it appears that you need to add javascript, although this is for an older version. See: https://stackoverflow.com/questions/46785393/bulma-dropdown-not-working. The suggested fix in the thread works perfectly.

So my question: is javascript required for the button to work?

If javascript is required this should be made clear in the documentation.

If javascript is not required then there appears to be a bug ... OR/ I am doing something stupid. (I am a novice in this area). In this case, troubleshooting to a fix would be helpful and I am happy to contribute back to the documentation help others avoid my mistake ...

Steps to Reproduce

1. Install Bulma using npm
2. Insert code snippet above for dropdown into a suitable html document to test behaviour on a local webserver

Expected behavior

1. Left-clicking on the dropdown button makes the dropdown list appear

Actual behavior

1. Nothing, unless some javascript is added to a js/bulma.js or equivalent file
   e.g.

let dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) {
    event.stopPropagation();
    dropdown.classList.toggle('is-active');
});

[bbatsell]

I agree that the docs are unclear, but reading between the lines in the Hoverable or Toggable section, if you want it to work without Javascript, you should use is-hoverable, which is implemented in only CSS.

[gdvallance]

Thanks, @bbatsell for the comment confirming that javascript is required.

I appreciate the suggestion, regarding https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable However, in my playing around is-hoverable only really works with mouse-driven devices. You need a mouse pointer to go over the button to activate and this does not exist on a mobile or tablet device where you are using your fingers ...

[jgthms]

Bulma is known to provide CSS only, but the docs could be improved here.

[TheSharpieOne]

I was wondering the same thing. It's also worth noting that the dropdown component does not appear usable by keyboard users without javascript. Hover requires a mouse and tabbing to the element doesn't do anything.

[bigsee]

I was also tripped over by this! Good catch and, yep, the documentation could be improved here... would be happy to contribute here, if possible.

[nielspeen]

Stumbled into this issue today. Documentation mentions that _is-active_ allows you to control the drop-down with JavaScript, suggesting that when you omit _is-active_ it will work without.

Snippet from @gdvallance works great. Thanks.

[sethlivingston]

Without JavaScript, this is an incomplete implementation of a dropdown component. We all love Bulma's pure CSS approach (in addition to all of the hard work from contributors), but this component isn't very usable without JavaScript. I think the majority of Bulma users would be fine with a small JavaScript requirement, especially if it was vanilla JavaScript.

[sylvaincaillot]

I fully support the use of a small JS requirement. I love this framework but it is not productive to search on Github issues or SO questions to implement such a basic feature.
By the way, it would be even nicer if it could work with nested menu items...

[johnbagnall]

I am just going to leave this here for people searching this, a tiny bit of js sorts the problem:

Remove the is-active from the dropdown class, set up an onclick event and pop this in there:

var dropdown = document.querySelector('.dropdown');
 dropdown.classList.toggle('is-active');

Should sort it out!

[rpiotti]

Down vote for adding javascript to a Pure CSS Framework. Vanilla js examples in the documentation should be sufficient for most developers.

[james-wasson]

The issue here can be solved by the introduction of another library many of which are listed here.
But I agree that javascript should not be included.

A small use case for why I think that no JS should be included:

• I am building a Vue application with a shared navbar
• I want to load the navabar dropdown items via Ajax depending on some state variables
  
  
  
  • With default JS I would have carefully choose which JS items to import so the user doesn't open an empty dropdown
  
  
  • Without JS I am free to wait for the Ajax to load then open the dropdown
  
  

[rpiotti]

Bulma is brilliant because it was carefully designed to be javascript agnostic which makes it perfect to implement in any usage context (React, Angular, Vue, JQuery, Vanilla ) free of integration issues. I really cringe when I see comments that say “just add a little javascript” as I don’t believe these users grasp the unintended consequences of littering Bulma with opinionated behavior.

BTW, there are some very helpful Bulma resources available in addition to the excellent docs to help users get the information they need. Likewise, there’s plenty of opinionated frameworks out there with default implementations but they are much less portable across javascript frameworks, if at all. These “opinionated” frameworks may seem easy at first but will ultimately lead you to a dead end. The beauty of Bulma is that you can take it with you on a variety of projects. Learn once - use everywhere.

[TheSharpieOne]

I don’t believe these developer grasp the unintended consequences of littering Bulma with non-accessible components.

I fixed it for you.

A11y is extremely important and the fact that Bulma is not accessible out of the box is huge.
Everything is javascript agnostic. Look at bootstrap... they have third-party libs for React, Angular, Vue, JQuery, and more. And if your are using another framework and cannot find a lib to support it... then you are in the same boat as Bulma since they don't support it either.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[juanifioren]

Make dropdowns work using jQuery:

$(".dropdown .button").click(function (){
    var dropdown = $(this).parents('.dropdown');
    dropdown.toggleClass('is-active');
    dropdown.focusout(function() {
        $(this).removeClass('is-active');
    });
});

[pundoo]

options click-event fix : https://stackoverflow.com/a/47944833/8644091