Rate these docs

React Bootstrap Hamburger Menu

React Hamburger Menu - Bootstrap 4 & Material Design

Bootstrap Hamburger menu is a navigation with additional hamburger looks-like icon which activates hidden menu elements in Navbar or Sidenav.

By clicking, you active a part of information or navigation that is hidden by default for UX purpose.

This usually means activating a SideNav, but might also roll down a Navbar menu.


Basic example

See the following Bootstrap hamburger menu examples


        import React, { Component } from 'react';
        import { MDBNavbar, MDBNavbarBrand, NavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBContainer }
        from 'mdbreact';

        class hamburgerMenuPage extends Component {
        state = {
          collapseID: ''
        }

        toggleCollapse = collapseID => () => {
          this.setState(prevState => ({ collapseID: (prevState.collapseID !== collapseID ? collapseID : '') }));
        }

        render() {
          return (
            <MDBContainer>
              <MDBNavbar color="light-blue lighten-4" style={{ marginTop: '20px' }} light>
                <MDBContainer>
                  <MDBNavbarBrand>
                    Navbar
                  </MDBNavbarBrand>
                  <MDBNavbarToggler onClick={this.toggleCollapse('navbarCollapse1')} />
                  <MDBCollapse id="navbarCollapse1" isOpen={this.state.collapseID} navbar>
                    <NavbarNav left>
                      <MDBNavItem active>
                        <MDBNavLink to="#!">Home</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Link</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Profile</MDBNavLink>
                      </MDBNavItem>
                    </NavbarNav>
                  </MDBCollapse>
                </MDBContainer>
              </MDBNavbar>
            </MDBContainer>
            );
          }
        }

        export default hamburgerMenuPage;
      

Various hamburger menu icons

You can use image prop to add custom icon to the NavbarToggler component


          import React, { Component } from 'react';
          import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBContainer }
          from 'mdbreact';

          class hamburgerMenuPage extends Component {
          state = {
          co  llapseID: ''
          }

          toggleCollapse = collapseID => () => {
            this.setState(prevState => ({ collapseID: (prevState.collapseID !== collapseID ? collapseID : '') }));
          }

          render() {
            return (
              <MDBContainer>
                <MDBNavbar color="bg-danger" style={{ marginTop: '20px' }} dark>
                  <MDBContainer>
                    <MDBNavbarBrand className="white-text">
                      MDBNavbar
                    </MDBNavbarBrand>
                    <MDBNavbarToggler image="https://mdbootstrap.com/img/svg/hamburger3.svg?color=00FBD8" onClick={this.toggleCollapse('navbarCollapse11')} />
                    <MDBCollapse id="navbarCollapse11" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Link</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Profile</MDBNavLink>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>
              </MDBContainer>
              );
            }
          }

          export default hamburgerMenuPage;
      

Hamburger menu icon animations

You can use HamburgerToggler component to get animated hamburger icon. Click on the icon to see the animation.


            import React, { Component } from 'react';
            import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBCollapse, MDBContainer,
            MDBHamburgerToggler } from 'mdbreact';

            class NavbarPage extends Component {
            state = {
              collapse1: false,
              collapseID: ''
            }

            toggleCollapse = collapseID => () => {
              this.setState(prevState => ({ collapseID: (prevState.collapseID !== collapseID ? collapseID : '') }));
            }

            toggleSingleCollapse = collapseId => {
              this.setState({
                ...this.state,
                [collapseId]: !this.state[collapseId]
              });
            }

            render() {
              return (
                <MDBContainer>
                  <MDBNavbar color="amber lighten-4" style={{ marginTop: '20px' }} light>
                    <MDBContainer>
                      <MDBNavbarBrand>
                        MDBNavbar
                      </MDBNavbarBrand>
                      <MDBHamburgerToggler color="#d3531a" id="hamburger1" onClick={()=> this.toggleSingleCollapse('collapse1')} />
                        <MDBCollapse isOpen={this.state.collapse1} navbar>
                          <MDBNavbarNav left>
                            <MDBNavItem active>
                              <MDBNavLink to="#!">Home</MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink to="#!">Link</MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink to="#!">Profile</MDBNavLink>
                            </MDBNavItem>
                          </MDBNavbarNav>
                        </MDBCollapse>
                    </MDBContainer>
                  </MDBNavbar>
                </MDBContainer>
                );
              }
            }

            export default NavbarPage;

        

Hamburger icon with background MDB Pro component


            import React, { Component } from 'react';
            import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBContainer,
            MDBIcon } from 'mdbreact';

            class NavbarPage extends Component {
            state = {
              collapseID: ''
            }

            toggleCollapse = collapseID => () => {
              this.setState(prevState => ({ collapseID: (prevState.collapseID !== collapseID ? collapseID : '') }));
            }

            render() {
              return (
                  <MDBContainer>
                    <MDBNavbar color="green lighten-4" style={{ marginTop: '20px' }} light>
                      <MDBContainer>
                        <MDBNavbarBrand>
                          MDBNavbar
                        </MDBNavbarBrand>
                        <MDBNavbarToggler tag="button" className="aqua-gradient" onClick={this.toggleCollapse('navbarCollapse13')}>
                          <span className="white-text">
                            <MDBIcon icon="bars" />
                          </span>
                        </MDBNavbarToggler>
                        <MDBCollapse id="navbarCollapse13" isOpen={this.state.collapseID} navbar>
                          <MDBNavbarNav left>
                            <MDBNavItem active>
                              <MDBNavLink to="#!">Home</MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink to="#!">Link</MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink to="#!">Profile</MDBNavLink>
                            </MDBNavItem>
                          </MDBNavbarNav>
                        </MDBCollapse>
                      </MDBContainer>
                    </MDBNavbar>
                  </MDBContainer>
                );
              }
            }

            export default NavbarPage;
        

Hamburger Menu - API

In this section you will find advanced information about the Hamburger Menu component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Hamburger Menu import statement

In order to use Hamburger Menu component make sure you have imported proper module first.


            import { MDBHamburgerToggler, MDBNavbarToggler } from 'mdbreact';
        

MDBNavbarToggler PropTypes

The table below shows the configuration options of the NavbarToggler component.

Name Type Default Description Example
className string Adds custom class to the component. <MDBNavbarToggler className="myClass" ... />
image string true Adds background image to toggler. <MDBNavbarToggler image="https://mdbootstrap.com/img/svg/hamburger8.svg?color=E3005C" ... />
right boolean To show the toggler on the right <MDBNavbarToggler right ... />
left boolean To show the toggler on the left <MDBNavbarToggler left ... />

MDBHamburgerToggler PropTypes

The table below shows the configuration options of the HamburgerToggler component.

Name Type Default Description Example
className string Adds custom class to the component. <MDBHamburgerToggler className="myClass" ... />
color string Change default color of hamburger icon <MDBHamburgerToggler color="#d3531a" ... />
id string Required. Adds id to the component <MDBHamburgerToggler id="hamburger1" ... />
isOpen boolean Defines if hamburger is open by default. <MDBHamburgerToggler isOpen={true}... />

React Hamburger Menu - examples & customization

Quickly get a project started with any of our examples.


Hamburger menu icon animations


        import React, { Component } from "react";
        import { MDBNavbar, MDBContainer, MDBNavLink, MDBNavItem, MDBHamburgerToggler, MDBNavbarBrand, MDBNavbarNav,
        MDBCollapse } from "mdbreact";

        class hamburgerMenuPage extends Component {
        state = {
          collapse1: ''
        }

        toggleSingleCollapse = collapseId => () => {
          this.setState({
            [collapseId]: !this.state[collapseId]
          });
        };

        render(){
          return (
            <MDBContainer>
              <MDBNavbar color="amber lighten-4" style={{ marginTop: '20px' }} light>
                <MDBContainer>
                  <MDBNavbarBrand>
                    MDBNavbar
                  </MDBNavbarBrand>
                  <MDBHamburgerToggler color="#d3531a" id="hamburger1" onClick={this.toggleSingleCollapse('collapse1')} />
                  <MDBCollapse isOpen={this.state.collapse1} navbar>
                    <MDBNavbarNav left>
                      <MDBNavItem active>
                        <MDBNavLink to="#!">Home</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Link</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Profile</MDBNavLink>
                      </MDBNavItem>
                    </MDBNavbarNav>
                  </MDBCollapse>
                </MDBContainer>
              </MDBNavbar>

              <MDBNavbar color="bg-danger" style={{ marginTop: '20px' }} dark>
                <MDBContainer>
                  <MDBNavbarBrand className="white-text">
                    MDBNavbar
                  </MDBNavbarBrand>
                  <MDBHamburgerToggler onClick={this.toggleSingleCollapse('collapse2')} isOpen={true} id="hamburger2" />
                  <MDBCollapse isOpen={this.state.collapse2} navbar>
                    <MDBNavbarNav left>
                      <MDBNavItem active>
                        <MDBNavLink to="#!">Home</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Link</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Profile</MDBNavLink>
                      </MDBNavItem>
                    </MDBNavbarNav>
                  </MDBCollapse>
                </MDBContainer>
              </MDBNavbar>

              <MDBNavbar color="indigo darken-2" style={{ marginTop: '20px' }} dark>
                <MDBContainer>
                  <MDBNavbarBrand className="white-text">
                    MDBNavbar
                  </MDBNavbarBrand>
                  <MDBHamburgerToggler onClick={this.toggleSingleCollapse('collapse3')} id="hamburger3" />
                  <MDBCollapse isOpen={this.state.collapse3} navbar>
                    <MDBNavbarNav left>
                      <MDBNavItem active>
                        <MDBNavLink to="#!">Home</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Link</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Profile</MDBNavLink>
                      </MDBNavItem>
                    </MDBNavbarNav>
                  </MDBCollapse>
                </MDBContainer>
              </MDBNavbar>
            </MDBContainer>
            );
          }
        }

        export default hamburgerMenuPage;

        

Various hamburger menu icons


          import React, { Component } from "react";
          import { MDBNavbar, MDBContainer, MDBNavLink, MDBNavItem, MDBNavbarToggler, MDBNavbarBrand, MDBNavbarNav, MDBCollapse }
          from "mdbreact";

          class hamburgerMenuPage extends Component {
          state = {
            navbarCollapse1: '',
            navbarCollapse2: '',
            navbarCollapse3: '',
            navbarCollapse5: '',
            navbarCollapse6: '',
            navbarCollapse7: '',
            navbarCollapse8: '',
            navbarCollapse9: '',
            navbarCollapse10: '',
            navbarCollapse11: ''
          }

          toggleCollapse = collapseID => () => {
            this.setState(prevState => ({
              collapseID: prevState.collapseID !== collapseID ? collapseID : ""
            }));
          };

          render(){
            return (
              <MDBContainer>
                <MDBNavbar style={{ marginTop: '20px' }} light>
                  <MDBContainer>
                    <MDBNavbarBrand>
                      MDBNavbar
                    </MDBNavbarBrand>
                    <MDBNavbarToggler image="https://mdbootstrap.com/img/svg/hamburger6.svg?color=000" onClick={this.toggleCollapse('navbarCollapse1')} />
                    <MDBCollapse id="navbarCollapse1" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Link</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Profile</MDBNavLink>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>

                <MDBNavbar color="bg-primary" style={{ marginTop: '20px' }} dark>
                  <MDBContainer>
                    <MDBNavbarBrand className="white-text">
                      MDBNavbar
                    </MDBNavbarBrand>
                    <MDBNavbarToggler image="/docs/img/svg/arrow_right.svg" onClick={this.toggleCollapse('navbarCollapse2')} />
                    <MDBCollapse id="navbarCollapse2" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Link</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Profile</MDBNavLink>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>

                <MDBNavbar color="light-blue lighten-4" style={{ marginTop: '20px' }}>
                  <MDBContainer>
                    <MDBNavbarBrand>
                      MDBNavbar
                    </MDBNavbarBrand>
                    <MDBNavbarToggler image="https://mdbootstrap.com/img/svg/hamburger2.svg?color=fff" onClick={this.toggleCollapse('navbarCollapse3')} />
                    <MDBCollapse id="navbarCollapse3" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Link</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Profile</MDBNavLink>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>

                <MDBNavbar color="pink lighten-4" style={{ marginTop: '20px' }} dark>
                  <MDBContainer>
                    <MDBNavbarBrand className="white-text">
                      MDBNavbar
                    </MDBNavbarBrand>
                    <MDBNavbarToggler image="https://mdbootstrap.com/img/svg/hamburger1.svg?color=6a1b9a" onClick={this.toggleCollapse('navbarCollapse5')} />
                    <MDBCollapse id="navbarCollapse5" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Link</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Profile</MDBNavLink>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>

                <MDBNavbar color="pink lighten-2" style={{ marginTop: '20px' }} dark>
                  <MDBContainer>
                    <MDBNavbarBrand className="white-text">
                      MDBNavbar
                    </MDBNavbarBrand>
                    <MDBNavbarToggler image="https://mdbootstrap.com/img/svg/hamburger7.svg?color=BFE100" onClick={this.toggleCollapse('navbarCollapse6')} />
                    <MDBCollapse id="navbarCollapse6" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Link</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Profile</MDBNavLink>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>

                <MDBNavbar color="bg-secondary mb-4" style={{ marginTop: '20px' }} dark>
                  <MDBContainer>
                    <MDBNavbarBrand className="white-text">
                      MDBNavbar
                    </MDBNavbarBrand>
                    <MDBNavbarToggler image="https://mdbootstrap.com/img/svg/hamburger5.svg?color=f3e5f5" onClick={this.toggleCollapse('navbarCollapse7')} />
                    <MDBCollapse id="navbarCollapse7" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Link</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Profile</MDBNavLink>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>

                <MDBNavbar color="bg-success" style={{ marginTop: '20px' }} dark>
                  <MDBContainer>
                    <MDBNavbarBrand className="white-text">
                      MDBNavbar
                    </MDBNavbarBrand>
                    <MDBNavbarToggler image="https://mdbootstrap.com/img/svg/hamburger8.svg?color=E3005C" onClick={this.toggleCollapse('navbarCollapse8')} />
                    <MDBCollapse id="navbarCollapse8" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Link</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Profile</MDBNavLink>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>

                <MDBNavbar color="bg-info" style={{ marginTop: '20px' }} dark>
                  <MDBContainer>
                    <MDBNavbarBrand className="white-text">
                      MDBNavbar
                    </MDBNavbarBrand>
                    <MDBNavbarToggler image="https://mdbootstrap.com/img/svg/hamburger9.svg?color=FF2C00" onClick={this.toggleCollapse('navbarCollapse9')} />
                    <MDBCollapse id="navbarCollapse9" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Link</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Profile</MDBNavLink>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>

                <MDBNavbar color="bg-warning " style={{ marginTop: '20px' }} dark>
                  <MDBContainer>
                    <MDBNavbarBrand className="white-text">
                      MDBNavbar
                    </MDBNavbarBrand>
                    <MDBNavbarToggler image="https://mdbootstrap.com/img/svg/hamburger4.svg?color=1729B0" onClick={this.toggleCollapse('navbarCollapse10')} />
                    <MDBCollapse id="navbarCollapse10" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Link</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Profile</MDBNavLink>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>

                <MDBNavbar color="bg-danger" style={{ marginTop: '20px' }} dark>
                  <MDBContainer>
                    <MDBNavbarBrand className="white-text">
                      MDBNavbar
                    </MDBNavbarBrand>
                    <MDBNavbarToggler image="https://mdbootstrap.com/img/svg/hamburger3.svg?color=00FBD8" onClick={this.toggleCollapse('navbarCollapse11')} />
                    <MDBCollapse id="navbarCollapse11" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Link</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Profile</MDBNavLink>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>
              </MDBContainer>
              );
            }
          }

          export default hamburgerMenuPage;
        

Hamburger icon with background MDB Pro component


        import React, { Component } from "react";
        import { MDBNavbar, MDBContainer, MDBNavLink, MDBNavItem, MDBNavbarToggler, MDBNavbarBrand, MDBNavbarNav, MDBCollapse,
        MDBIcon } from "mdbreact";

        class hamburgerMenuPage extends Component {
        state = {
          navbarCollapse12: '',
          navbarCollapse13: '',
          navbarCollapse14: '',
          navbarCollapse15: ''
        }

        toggleCollapse = collapseID => () => {
          this.setState(prevState => ({
            collapseID: prevState.collapseID !== collapseID ? collapseID : ""
          }));
        };

        render(){
          return (
            <MDBContainer>
              <MDBNavbar color="orange lighten-4" style={{ marginTop: '20px' }} light>
                <MDBContainer>
                  <MDBNavbarBrand>
                    MDBNavbar
                  </MDBNavbarBrand>
                  <MDBNavbarToggler tag="button" className="peach-gradient" onClick={this.toggleCollapse('navbarCollapse12')}>
                    <span className="white-text">
                      <MDBIcon icon="bars" />
                    </span>
                  </MDBNavbarToggler>
                  <MDBCollapse id="navbarCollapse12" isOpen={this.state.collapseID} navbar>
                    <MDBNavbarNav left>
                      <MDBNavItem active>
                        <MDBNavLink to="#!">Home</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Link</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Profile</MDBNavLink>
                      </MDBNavItem>
                    </MDBNavbarNav>
                  </MDBCollapse>
                </MDBContainer>
              </MDBNavbar>

              <MDBNavbar color="green lighten-4" style={{ marginTop: '20px' }} light>
                <MDBContainer>
                  <MDBNavbarBrand>
                    MDBNavbar
                  </MDBNavbarBrand>
                  <MDBNavbarToggler tag="button" className="aqua-gradient" onClick={this.toggleCollapse('navbarCollapse13')}>
                    <span className="white-text">
                      <MDBIcon icon="bars" />
                    </span>
                  </MDBNavbarToggler>
                  <MDBCollapse id="navbarCollapse13" isOpen={this.state.collapseID} navbar>
                    <MDBNavbarNav left>
                      <MDBNavItem active>
                        <MDBNavLink to="#!">Home</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Link</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Profile</MDBNavLink>
                      </MDBNavItem>
                    </MDBNavbarNav>
                  </MDBCollapse>
                </MDBContainer>
              </MDBNavbar>

              <MDBNavbar color="purple lighten-4" style={{ marginTop: '20px' }} light>
                <MDBContainer>
                  <MDBNavbarBrand>
                    MDBNavbar
                  </MDBNavbarBrand>
                  <MDBNavbarToggler tag="button" className="purple-gradient" onClick={this.toggleCollapse('navbarCollapse14')}>
                    <span className="white-text">
                      <MDBIcon icon="bars" />
                    </span>
                  </MDBNavbarToggler>
                  <MDBCollapse id="navbarCollapse14" isOpen={this.state.collapseID} navbar>
                    <MDBNavbarNav left>
                      <MDBNavItem active>
                        <MDBNavLink to="#!">Home</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Link</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Profile</MDBNavLink>
                      </MDBNavItem>
                    </MDBNavbarNav>
                  </MDBCollapse>
                </MDBContainer>
              </MDBNavbar>

              <MDBNavbar color="bg-primary" style={{ marginTop: '20px' }} dark>
                <MDBContainer>
                  <MDBNavbarBrand className="white-text">
                    MDBNavbar
                  </MDBNavbarBrand>
                  <MDBNavbarToggler tag="button" className="blue-gradient" onClick={this.toggleCollapse('navbarCollapse15')}>
                    <span className="white-text">
                      <MDBIcon icon="bars" />
                    </span>
                  </MDBNavbarToggler>
                  <MDBCollapse id="navbarCollapse15" isOpen={this.state.collapseID} navbar>
                    <MDBNavbarNav left>
                      <MDBNavItem active>
                        <MDBNavLink to="#!">Home</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Link</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Profile</MDBNavLink>
                      </MDBNavItem>
                    </MDBNavbarNav>
                  </MDBCollapse>
                </MDBContainer>
              </MDBNavbar>
            </MDBContainer>
            );
          }
        }

        export default hamburgerMenuPage;