/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 vote227 views1 answer
How to resolve click for div logging as parent too, in react
Javascript React
145 votes817 views6 answers
Add bootstrap to react
Javascript React
8 votes219 views3 answers
React js props
Javascript React
47 votes221 views3 answers
How to comment in the react javascript
Javascript React
1 vote227 views2 answers
[HomePage] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
Javascript React
126 votes661 views4 answers
React app using npm
Javascript React
0 vote207 views1 answer
UseFetch custom hook for React
Javascript React
0 vote220 views2 answers
Jest simulate toggle switch react native
Javascript React
8 votes223 views1 answer
Ternary operator in button react
Javascript React
19 votes220 views6 answers
React.js
Javascript React