Bulma: Dropdown is not hiding automatically after click on a dropdown link on navbar

[diptomondal007]

This is about the Bulma CSS framework..I am working on a project and i am using bulma dropdown on navbar..but the dropdown is not hiding after clicking on link of the dropdown and to make it hide another click is needed outside..How can i fix this..??

[phunanon]

I have the same problem. @diptomondal007, did you find a solution?

[jgthms]

Any example?

[diptomondal007]

This problem is happening in react if i use navbar as a generic component in routing...I have solved that problem by using jbx bulma(a bulma react library). @phunanon

[phunanon]

It happens for me even without React when I investigated. I visit the menu example here, inspect the "About" item and add href="#". The element remains "active" after a click, preventing the drop-down hide (Firefox 69). Weird though: giving it a 'proper' href such as #basic-navbar avoids the issue, but on my React app I'm using a 'proper' href and it's still not closing.

[diptomondal007]

@phunanon you may try jbx...and without react you may use jquery to solve the problem..there are so many jquery solutions available..

[simplenotezy]

I have the same issue, quite annoying. I am using vue

[slidenerd]

A dropdown made with is-hoverable does not close automatically after navigating away from the current page, on nuxt.js here

[rknidzam]

I ended up use this solution. I'm using React JS to control the NavBar Burger.

1) I used React Hooks

const [isActive, setisActive] = useState(false);

2) Then in the navbar-burger button I used onClick eventto open the NavBar.

onClick={() => {
setisActive(!isActive);
}}

3) Lastly, I do the same on all the navbar item link.

onClick={() => {
setisActive(!isActive);
}}

Hope it helps.

[itsip]

Here's another solution for this using react without having to use state.

I just add onClick={(event) => { event.target.blur(); }} to any dropdown links.

Example with react-router:

<div className="navbar-item has-dropdown is-hoverable">
  <span className="navbar-link">Dropdown Text</span>
  <div className="navbar-dropdown">
    <Link className="navbar-item" to="/path" onClick={(event) => { event.target.blur(); }}>
      Link Text
    </Link>
  </div>
</div>