Burger menu using bulma on React not working
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;
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>