Burger menu using bulma on React not working

Related searches

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

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>

Getting the Bulma Burger Menu to work with React, Luckily this is a fairly common problem which is discussed in detail here and has a very elegant none-JavaScript solution here. The key pieces� This is about the Bulma Docs I'm using Bulma version [0.4.3] My browser is: Firefox. Description. I'm building a website using Bulma, and I haven't included any javascript files. I'm loading Bulma using cdnjs. I'm having trouble getting the burger icon to expand the target navbar-menu.

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

Bulma Navbar Toogle with React Hooks - DEV, I enjoy using Bulma but it does not include JavaScript actions for This article is an example of a simple way to use React hooks as an way to toggle a Navbar menu. <a role='button' className={'navbar-burger burger'} aria-label='menu' but on the smaller screen sizes, the menu toggle does not work. BTW, it's almost been two years since the original post, and the Bulma docs still don't mention that you need to write a JS event handler for the burger menu to work. This may be obvious to seasoned front-end developers, but not to us noobs.

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;

Burger button not working � Issue #203 � couds/react-bulma , https://couds.github.io/react-bulma-components/? I found the issue and fixed in my side, it's not an issue in Burger Component. *Note: I'd like to fix it if you lead me The Burger menu shows up but no dropdown. In creating a simple layout I started with a header and a few simple routes. Bulma has a cool navbar component that makes it easy to get things going. The navbar component is of course responsive out of the box, but with Bulma being CSS-only, there is not a way to open the menu in a small/mobile view.

Unable to get hero nav hamburger menu to work � Issue #238 , Bulma Version: 0.28 Browser: Tested Chrome & Safari Description I'm unable to get I'm unable to get the hamburger menu to work in hero->nav React snippet (w/o jQuery) on an element with @tbonz my apologies, I was looking in the navbar burger section, not in navbar menu, since the burger is the� This is about the Docs. Overview of the problem Inconsistent use of navbar-burger in the site itself, versus examples shown. This is about the Bulma Docs I'm using Bulma version 0.6.1 Description The navbar documentation says that the na

Navbar, navbar-burger the hamburger icon, which toggles the navbar menu on touch devices The Bulma package does not come with any JavaScript. Here is however� Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Full Page Tabs Hover Tabs Top Navigation Responsive Topnav Navbar with Icons Search Menu Search Bar Fixed Sidebar Side Navigation Responsive Sidebar Fullscreen Navigation Off-Canvas Menu Hover Sidenav Buttons Sidebar with Icons Horizontal Scroll Menu Vertical Menu Bottom Navigation

This is about the Docs. Overview of the problem This is possibly about the Bulma Docs I'm using Bulma version [0.7.1] My browser is: Firefox 59.0.3 (64bit) & Chrome 66.0.3359.139 (Official Build) (64-bit) Description Example code in the

Comments
  • Bulma do not provide js code. check the javascript toggle section in the doc
  • @MaximeB im using the data-target attribute, is it really need js code?