React Hamburger Menu
React Hamburger Menu - Bootstrap 4 & Material Design
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO
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;