React Hamburger Menu

React Hamburger Menu - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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,
                MDBNavbarNav,
                MDBNavItem,
                MDBNavLink,
                MDBNavbarToggler,
                MDBCollapse,
                MDBContainer
              } from 'mdbreact';
              import { BrowserRouter as Router } from 'react-router-dom';

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

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

                render() {
                  return (
                    <Router>
                      <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
                            >
                              <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>
                    </Router>
                  );
                }
              }

              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';
            import { BrowserRouter as Router } from 'react-router-dom';

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

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

            render() {
              return (
                <Router>
                  <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>
                </Router>
                );
              }
            }

            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';
                import { BrowserRouter as Router } from 'react-router-dom';

                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 (
                    <Router>
                      <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>
                    </Router>
                    );
                  }
                }

                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';
                import { BrowserRouter as Router } from 'react-router-dom';

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

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

                render() {
                  return (
                    <Router>
                      <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>
                    </Router>
                    );
                  }
                }

                export default NavbarPage;

React 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";
        import { BrowserRouter as Router } from 'react-router-dom';

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

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

        render(){
          return (
            <Router>
              <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>
            </Router>
            );
          }
        }

        export default hamburgerMenuPage;

Various hamburger menu icons 

        
            
          import React, { Component } from "react";
          import { MDBNavbar, MDBContainer, MDBNavLink, MDBNavItem, MDBNavbarToggler, MDBNavbarBrand, MDBNavbarNav, MDBCollapse }
          from "mdbreact";
          import { BrowserRouter as Router } from 'react-router-dom';

          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 (
              <Router>
                <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>
              </Router>
              );
            }
          }

          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";
        import { BrowserRouter as Router } from 'react-router-dom';

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

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

        render(){
          return (
            <Router>
              <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>
            </Router>
            );
          }
        }

        export default hamburgerMenuPage;