Burger menu using bulma on React not working

Question

I am new to react. Im trying to make a navigation in my header. i use bulma css :

"bulma": "^0.7.4",

And i import bulma file like this:

import 'bulma/css/bulma.css';

It is working for the most of the css but not with burger menu, the menu is not collapsed when i click on the burger button

Here is my header code:

import React,{Component} from 'react'
import {NavLink} from 'react-router-dom';
import style from './style.css';

class Header extends Component{

    render(){
        return (
            <React.Fragment>
                <nav className="navbar is-fixed-top" role="navigation" aria-label="main navigation">
                    <div className="navbar-brand">
                        <a href="/" className="navbar-item" to="/">
                        <img src="" alt="" width={112} height={28}/>
                        </a>

                        <a role="button" className="navbar-burger burger " aria-label="menu" aria-expanded="false" data-target="mainNavbar">
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                        </a>
                    </div>

                    <div  id="mainNavbar" className="navbar-menu">

                        <div className="navbar-start">
                            <NavLink exact activeClassName={style.active} to="/"  className="navbar-item">
                                Home
                            </NavLink>

                            <NavLink activeClassName={style.active} to="/films"  className="navbar-item">
                                Films
                            </NavLink>
                        </div>

                    </div>
                    </nav>  
            </React.Fragment>
        );
    }
}


export default Header;

The

data-target

attribute on the burger button is not triggering the menu. Pleas let me know what im doing wrong. Thanks

Anyways

Bulma do not provide js code. check the javascript toggle section in the doc – Dewitt

@Dewitt im using the data-target attribute, is it really need js code? – Anyways

Answer 1

Bulma doesn't have a built in toggle event you have to create it manually by adding "is-active" class in "navbar-burger" and "navbar-menu" here I have achieved that with React Hooks

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

 <nav className="navbar" role="navigation" aria-label="main navigation">
        <div className="navbar-brand">
          <a
            onClick={() => {
              setisActive(!isActive);
            }}
            role="button"
            className={`navbar-burger burger ${isActive ? "is-active" : ""}`}
            aria-label="menu"
            aria-expanded="false"
            data-target="navbarBasicExample"
          >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>
        <div
          id="navbarBasicExample"
          className={`navbar-menu ${isActive ? "is-active" : ""}`}
        >
          <div className="navbar-start">
            <a className="navbar-item">Home</a>
            <a className="navbar-item">Documentation</a>
          </div>
        </div>
   </nav>

Intrepid

Than you for all that you do! Works like a charm! – Woodyard

Answer 2

As stated in another answer, additional js is required to make Bulma's burger menu work. Below is how I did it. The key in toggleBurgerMenu. Also, toggleBurgerMenu needs to be specified in the onClick event of each navbar-item so that the burger menu closes after a menu item is clicked.

import React from 'react';
import { Link } from 'react-router-dom';

const Navigation = (props) => {
  function toggleBurgerMenu() {
    document.querySelector('.navbar-menu').classList.toggle('is-active');
  }

  return (
    <nav className="navbar" role="navigation" aria-label="main navigation">
      <div className="navbar-brand">
        <Link to="/" className="navbar-item">React App</Link>

        <a role="button" className="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasic"
          onClick={toggleBurgerMenu}>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div id="navbarBasic" className="navbar-menu">
        <div className="navbar-start">
          <Link to="/about" className="navbar-item" onClick={toggleBurgerMenu}>About</Link>
          <Link to="/contact" className="navbar-item" onClick={toggleBurgerMenu}>Contact</Link>
          <Link to="/notes" className="navbar-item" onClick={toggleBurgerMenu}>Notes</Link>
        </div>
      </div>
    </nav>
  );
}

export default Navigation;

Powered

Answer 3

When you click on a burger, 'navbar-menu' should be 'navbar-menu is-active'. In the opposite case, you should also remove 'is-active'.

Sulphuric