/Javascript/React/Burger menu bulma React

Burger menu bulma React

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>

Source: stackoverflow.com

Similar codes

0 vote426 views1 answer
Show modal by using id in list react
Javascript React
14 votes324 views5 answers
React conditional class
Javascript React
15 votes330 views4 answers
Get query params react
Javascript React
0 vote360 views3 answers
Line 32:18: 'Link' is not defined react/jsx-no-undef
Javascript React
1 vote350 views2 answers
React native select simulator
Javascript React
0 vote403 views1 answer
Disable enter on input field react
Javascript React
5 votes359 views2 answers
React img not showing
Javascript React
7 votes298 views1 answer
React Hook "React.useState" is called in function "placeItem" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Javascript React
0 vote387 views1 answer
React native make safe view in mobile
Javascript React
15 votes355 views1 answer
Reducer in react example
Javascript React