React Bootstrap navigation

MDB provides you several useful, ready-to-use navigation layouts with various predefined navigation types.

1. Regular fixed Navbar

2. Regular non-fixed Navbar

3. Full Page Intro with non-fixed Navbar

4. Full Page Intro with fixed Navbar

5. Full Page Intro with fixed, transparent Navbar

6. Full Page Intro with non-fixed, transparent Navbar

7. Double Navigation with fixed SideNav & fixed Navbar

8. Double Navigation with fixed SideNav & non-fixed Navbar

9. Double Navigation with hidden SideNav & fixed Navbar

10. Double Navigation with hidden SideNav & non-fixed Navbar


Regular fixed Navbar

Website with a regular fixed Navbar. Live preview
import React, { Component } from 'react';
import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLinkContainer } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';

class FixedNavbarExample extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          collapse: false,
          isWideEnough: false
      };
  this.onClick = this.onClick.bind(this);
}

onClick(){
  this.setState({
      collapse: !this.state.collapse,
    });
}


render() {
    const bgPink = {backgroundColor: '#ec407a'}
  const container = {height: 1300}
    return (
          <div>
          <Router>
            <Navbar style={bgPink} dark expand="md" scrolling fixed=top">
                <NavbarBrand href="/">
                    <strong>Navbar</strong>
                </NavbarBrand>
                { !this.state.isWideEnough && <NavbarToggler onClicthis.onClick } />}
                <Collapse isOpen = { this.state.collapse } navbar>
                    <NavbarNav left>
                      <NavItem active>
                          <NavLink to="#">Home</NavLink>
                      </NavItem>
                      <NavItem>
                          <NavLink to="#">Features</NavLink>
                      </NavItem>
                      <NavItem>
                          <NavLink to="#">Pricing</NavLink>
                      </NavItem>
                      <NavItem>
                        <NavLink to="#">Options</NavLink>
                      </NavItem>
                    </NavbarNav>
                    <NavbarNav right>
                      <NavItem>
                        <NavLink to="#"><Fa icon="facebook/></NavLink>
                      </NavItem>
                      <NavItem>
                        <NavLink to="#"><Fa icon="twitter&qgt;</NavLink>
                      </NavItem>
                      <NavItem>
                        <NavLink to="#"><Fa icon="instagram/></NavLink>
                      </NavItem>
                    </NavbarNav>
                </Collapse>
            </Navbar>
        </Router>

        <Container style={container} className="text-center mt-5">
          <h2>This Navbar is fixed</h2>
          <h5>It will always stay visible on the top, even when you scroll do/h5>
          <br/>
          <p>Full page intro with background image will be always displayfull screen mode, regardless of device </p>
        </Container>

      </div>
    );
  }
}

export default FixedNavbarExample;

Regular non-fixed Navbar

Website with a regular fixed Navbar. Live preview
import React, { Component } from 'react';
import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Fa, Container } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';

class NonFixedNavbarExample extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          collapse: false,
          isWideEnough: false
      };
  this.onClick = this.onClick.bind(this);
}

onClick(){
  this.setState({
      collapse: !this.state.collapse,
    });
}

render() {
  const container = {height: 1300}
    return (
        <div>
          <Router>
            <Navbar color="default-color" dark expand="md" scrolling>
                <NavbarBrand href="/">
                    <strong>Navbar</strong>
                </NavbarBrand>
                { !this.state.isWideEnough && <NavbarToggler onClick={this.onClick } />}
                <Collapse isOpen = { this.state.collapse } navbar>
                    <NavbarNav left>
                      <NavItem active>
                          <NavLink to="#">Home</NavLink>
                      </NavItem>
                      <NavItem>
                          <NavLink to="#">Features</NavLink>
                      </NavItem>
                      <NavItem>
                          <NavLink to="#">Pricing</NavLink>
                      </NavItem>
                      <NavItem>
                        <NavLink to="#">Options</NavLink>
                      </NavItem>
                    </NavbarNav>
                    <NavbarNav right>
                      <NavItem>
                        <NavLink to="#"><Fa icon="facebook/></NavLink>
                      </NavItem>
                      <NavItem>
                        <NavLink to="#"><Fa icon="twitter&qgt;</NavLink>
                      </NavItem>
                      <NavItem>
                        <NavLink to="#"><Fa icon="instagram/></NavLink>
                      </NavItem>
                    </NavbarNav>
                </Collapse>
            </Navbar>
        </Router>

        <Container style={container} className="text-center mt-5">
          <h2>This Navbar isn't fixed</h2>
          <h5>When you scroll down it will disappear</h5>
        </Container>

      </div>
    );
  }
}

export default NonFixedNavbarExample;

Full Page Intro with non-fixed Navbar

Website with a regular fixed Navbar. Live preview
import React, { Component } from 'react';
import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Fa, Container, MRow, Col, View, Mask } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';

class FullPageIntroWithNonFixedNavbar extends React.Component {
  constructor(props) {
  super(props);
    this.state = {
      collapse: false,
      isWideEnough: false,
      };
  this.onClick = this.onClick.bind(this);
}

onClick(){
  this.setState({
    collapse: !this.state.collapse,
  });
}
render() {
const view = {background: 'url("https://mdbootstrap.com/img/Photos/Others/img%20(51).jpg")no-repeat center center', backgroundSize: 'cover', height: '100vh'}
return (
    <div>
      <header>
        <Router>
          <Navbar color="black" dark expand="md" scrolling>
            <NavbarBrand href="/">
                <strong>Navbar</strong>
            </NavbarBrand>
            { !this.state.isWideEnough && <NavbarToggler onClick = { this.onClick } />}
          <Collapse isOpen = { this.state.collapse } navbar>
            <NavbarNav left>
              <NavItem active>
                  <NavLink to="#">Home</NavLink>
              </NavItem>
              <NavItem>
                  <NavLink to="#">Link</NavLink>
              </NavItem>
              <NavItem>
                  <NavLink to="#">Profile</NavLink>
              </NavItem>
            </NavbarNav>
          </Collapse>
        </Navbar>
      </Router>

      <View style={view}>
        <Mask overlay="black-strong" style={{flexDirection: 'column'}} className="flex-center  text-white text-center">
          <h2>This Navbar isn't fixed</h2>
          <h5>When you scroll down it will disappear</h5>
          <br/>
          <p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p>
        </Mask>
      </View>
    </header>
    <main>
      <Container className="text-center my-5">
        <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia  deserunt mollit anim id est laborum.</p>
      </Container>
    </main>
  </div>
);
}
}

export default FullPageIntroWithNonFixedNavbar;

Full Page Intro with fixed Navbar

Website with a regular fixed Navbar. Live preview
import React, { Component } from 'react';
import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Fa, Container, Mask, View, Row, Col } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';

class FullPageIntroWithFixedNavbar extends React.Component {
  constructor(props) {
    super(props);
      this.state = {
        collapse: false,
        isWideEnough: false
      };
  this.onClick = this.onClick.bind(this);
}

onClick(){
  this.setState({
    collapse: !this.state.collapse
});
}

render() {
  const view = {background: 'url("https://mdbootstrap.com/img/Photos/Others/img%20(50).jpg")no-repeat center center', backgroundSize: 'cover', height: '100vh'}
    return (
          <div>
            <header>
              <Router>
                <Navbar color="indigo" dark expand="md" scrolling>
                  <NavbarBrand href="/">
                      <strong>Navbar</strong>
                  </NavbarBrand>
                  { !this.state.isWideEnough && <NavbarToggler onClick = { this.onClick } />}
              <Collapse isOpen = { this.state.collapse } navbar>
                <NavbarNav left>
                  <NavItem active>
                      <NavLink to="#">Home</NavLink>
                  </NavItem>
                  <NavItem>
                      <NavLink to="#">Link</NavLink>
                  </NavItem>
                  <NavItem>
                      <NavLink to="#">Profile</NavLink>
                  </NavItem>
                </NavbarNav>
              </Collapse>
            </Navbar>
          </Router>

          <View style={view}>
            <Mask overlay="black-light" style={{flexDirection: 'column'}} className="flex-center  text-white text-center">
              <h2>This Navbar is fixed</h2>
              <h5>It will always stay visible on the top, even when you scroll down</h5>
              <br/>
              <p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p>
            </Mask>
          </View>
        </header>
        <main>
          <Container className="text-center my-5">
            <p align="justify">Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </Container>
        </main>
      </div>
    );
  }
}

export default FullPageIntroWithFixedNavbar;

Full Page Intro with fixed, transparent Navbar

Website with a regular fixed Navbar. Live preview
import React, { Component } from 'react';
import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Fa, Container, Mask, View } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';
import './FullPageIntroWithFixedTransparentNavbar.css';

class FullPageIntroWithFixedTransparentNavbar extends React.Component {
  constructor(props) {
    super(props);
      this.state = {
        collapse: false,
        isWideEnough: false,
      };
  this.onClick = this.onClick.bind(this);
}

onClick(){
  this.setState({
    collapse: !this.state.collapse,
  });
}
render() {
  const view = {background: 'url("https://mdbootstrap.com/img/Photos/Others/img%20(40).jpg")no-repeat center center', backgroundSize: 'cover', height: '100vh'}
  return (
        <div>
          <header>
            <Router>
              <Navbar color="transparent" dark expand="md" fixed="top" scrolling>
                <NavbarBrand href="/">
                    <strong>Navbar</strong>
                </NavbarBrand>
                { !this.state.isWideEnough && <NavbarToggler onClick = { this.onClick } />}
                <Collapse isOpen = { this.state.collapse } navbar>
                  <NavbarNav left>
                    <NavItem active>
                        <NavLink to="#">Home</NavLink>
                    </NavItem>
                    <NavItem>
                        <NavLink to="#">Link</NavLink>
                    </NavItem>
                    <NavItem>
                        <NavLink to="#">Profile</NavLink>
                    </NavItem>
                  </NavbarNav>
                </Collapse>
              </Navbar>
            </Router>

            <View style={view}>

              <Mask overlay="purple-light" style={{flexDirection: 'column'}} className="flex-center  text-white text-center">
                <h2>This Navbar is fixed</h2>
                <h5>It will always stay visible on the top, even when you scroll down</h5>
                <p>Navbar's background will switch from transparent to solid color while scrolling down</p><br/>
                <p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p>
              </Mask>
            </View>
          </header>
          <Container className="text-center my-5">
            <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </Container>
        </div>
    );
  }
}

export default FullPageIntroWithFixedTransparentNavbar;
// FullPageIntroWithFixedTransparentNavbar.css
.navbar {
  background-color: transparent;
}
.top-nav-collapse {
  background-color: #4285F4;
}
@media only screen and (max-width: 768px) {
  .navbar {
      background-color: #4285F4;
  }
}

Full Page Intro with non-fixed, transparent Navbar

Website with a regular fixed Navbar. Live preview
import React, { Component } from 'react';
import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Fa, Container, Mask, View, Row, Col } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';
import './FullPageIntroWithNonFixedTransparentNavbar.css';

class FullPageIntroWithNonFixedTransparentNavbar extends React.Component {
    constructor(props) {
      super(props);
        this.state = {
          collapse: false,
          isWideEnough: false,
      };
  this.onClick = this.onClick.bind(this);
}

onClick(){
    this.setState({
      collapse: !this.state.collapse,
  });
}
render() {
    const view = {background: 'url("https://mdbootstrap.com/img/Photos/Others/img%20(42).jpg")no-repeat center center', backgroundSize: 'cover', height: '100vh', marginTop: '-56px'}
  return (
          <div>
          <header>
            <Router>
              <Navbar color="transparent" dark expand="md">
                <NavbarBrand href="/">
                    <strong>Navbar</strong>
                </NavbarBrand>
                { !this.state.isWideEnough && <NavbarToggler onClick = { this.onClick } />}
                <Collapse isOpen = { this.state.collapse } navbar>
                  <NavbarNav left>
                    <NavItem active>
                        <NavLink to="#">Home</NavLink>
                    </NavItem>
                    <NavItem>
                        <NavLink to="#">Link</NavLink>
                    </NavItem>
                    <NavItem>
                        <NavLink to="#">Profile</NavLink>
                    </NavItem>
                  </NavbarNav>
                </Collapse>
              </Navbar>
            </Router>

            <View style={view}>

              <Mask overlay="indigo-slight" style={{flexDirection: 'column'}} className="flex-center  text-white text-center">
                <h2>This Navbar isn't fixed</h2>
                <h5>When you scroll down it will disappear</h5><br/>
                <p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p>
              </Mask>
            </View>
          </header>
          <Container className="text-center my-5">
            <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </Container>
        </div>
    );
  }
}

export default FullPageIntroWithNonFixedTransparentNavbar;
.navbar {
    background-color: transparent;
    z-index: 1;
}
@media only screen and (max-width: 768px) {
    .navbar {
        background-color: #1C2331;
    }
}
@media (min-width: 768px) {
    .view {
        overflow: visible;
    }
}

Double Navigation with fixed SideNav & fixed Navbar MDB Pro component

Website with a regular fixed Navbar. Live preview
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { Navbar, NavbarNav, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Fa, SideNavItem, SideNavCat, SideNavNav, SideNav, Container } from 'mdbreact';

class DoubleNavigationWithFixedSideNavFixedNavbar extends React.Component  {
constructor(props) {
    super(props);
    this.state = {
        collapse: false,
        isWideEnough: false,
        dropdownOpen: false,
        toggleStateA: false,
        accordion: false,
        collapsed: false,
    };
  this.onClick = this.onClick.bind(this);
  this.toggle = this.toggle.bind(this);
  this.onClick0 = this.onClick0.bind(this);
  this.onClick1 = this.onClick1.bind(this);
  this.onClick2 = this.onClick2.bind(this);
  this.onClick3 = this.onClick3.bind(this);
  this.handleToggleClickA = this.handleToggleClickA.bind(this);
}

onClick0(){
  let state = '';

  if (this.state.accordion !== 0) {
    state = 0;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}

onClick1(){
  let state = '';

  if (this.state.accordion !== 1) {
    state = 1;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}

onClick2(){
  let state = '';

  if (this.state.accordion !== 2) {
    state = 2;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}

onClick3(){
  let state = '';

  if (this.state.accordion !== 3) {
    state = 3;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}

onClick4(){
  let state = '';

  if (this.state.accordion !== 4) {
    state = 4;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}


// Slide out buttons event handlers
handleToggleClickA(){
  this.setState({
    toggleStateA: !this.state.toggleStateA
  })
}
onClick(){
    this.setState({
        collapse: !this.state.collapse,
    });
}

toggle() {
    this.setState({
        dropdownOpen: !this.state.dropdownOpen
    });
}

render() {
  const isOpenWithButtonA = this.state.toggleStateA;
  const navStyle = { backgroundColor: "#3f5c80", color: "#fff"}
  const sideStyle = { backgroundColor: '#6a9ed3', width: "100%"}
  const mainStyle={margin: "0 auto", maxWidth: "1000px", paddingTop: '5.5rem'};
  const button1 = <div href="#!" onClick={this.handleToggleClickA} key="sideNavToggleA" style={{lineHeight: '32px', marginRight: '1em', verticalAlign: 'middle'}}><Fa icon="bars" color="white" size="2x"></Fa></div>
  const specialCaseNavbarStyles = {WebkitBoxOrient: 'horizontal', flexDirection: 'row'};
    return (
        <Router>
          <div className="mt-5">
            <SideNav logo="https://mdbootstrap.com/img/logo/mdb-transparent.png" isOpenWithButton={isOpenWithButtonA} breakWidth={1300} style={sideStyle}>
              <li>
                <ul className="social">
                  <li><a href="#!"><Fa icon="facebook"></Fa></a></li>
                  <li><a href="#!"><Fa icon="pinterest"></Fa></a></li>
                  <li><a href="#!"><Fa icon="google-plus"></Fa></a></li>
                  <li><a href="#!"><Fa icon="twitter"></Fa></a></li>
                </ul>
              </li>
              <SideNavNav>
                <SideNavCat name="Submit blog" onClick={this.onClick0} isOpen={this.state.accordion === 0 } icon="chevron-right">
                    <SideNavItem>Submit listing</SideNavItem>
                    <SideNavItem>Registration form</SideNavItem>
                </SideNavCat>
                <SideNavCat name="Instruction" onClick={this.onClick1} isOpen={this.state.accordion === 1 } icon="hand-pointer-o">
                  <SideNavItem>For bloggers</SideNavItem>
                  <SideNavItem>For authors</SideNavItem>
                </SideNavCat>
                <SideNavCat name="About" onClick={this.onClick2} isOpen={this.state.accordion === 2 } icon="eye">
                  <SideNavItem>Instruction</SideNavItem>
                  <SideNavItem>Monthly meetings</SideNavItem>
                </SideNavCat>
                <SideNavCat name="Contact me" onClick={this.onClick3} isOpen={this.state.accordion === 3 } icon="envelope-o">
                  <SideNavItem>FAQ</SideNavItem>
                  <SideNavItem>Write a message</SideNavItem>
                </SideNavCat>
              </SideNavNav>
            </SideNav>
            <Navbar style={navStyle} dark expand="md" fixed="top">
              <NavbarNav left>
              <NavItem>
                    {button1}
              </NavItem>
                <NavItem className="d-none d-md-inline" style={{paddingTop: 5}}>
                    <strong>Material Design for Bootstrap</strong>
                </NavItem>
              </NavbarNav>
              <NavbarNav right style={specialCaseNavbarStyles}>
                <NavItem active>
                    <NavLink to="#!"><Fa icon="envelope" className="d-inline-inline"/>  <div className="d-none d-md-inline">Contact</div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink to="#!"><Fa icon="comments-o" className="d-inline-inline"/> <div className="d-none d-md-inline">Support</div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink to="#!"><Fa icon="user" className="d-inline-inline"/>  <div className="d-none d-md-inline">Account</div></NavLink>
                </NavItem>
                <NavItem>
                  <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                    <DropdownToggle nav caret> <div className="d-none d-md-inline">Dropdown</div></DropdownToggle>
                    <DropdownMenu right>
                      <DropdownItem href="#!">Action</DropdownItem>
                      <DropdownItem href="#!">Another Action</DropdownItem>
                      <DropdownItem href="#!">Something else here</DropdownItem>
                      <DropdownItem href="#!">Something else here</DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                </NavItem>
              </NavbarNav>
            </Navbar>
            <main style={mainStyle}>
              <Container fluid style={{height: 2000}} className="mt-5">
                <h2>Advanced Double Navigation with fixed SideNav & fixed Navbar:</h2><br/>
                <h5>1. Fixed side menu, hidden on small devices.</h5>
                <h5>2. Fixed Navbar. It will always stay visible on the top, even when you scroll down.</h5>
              </Container>
            </main>
            </div>
        </Router>
    );
  }
};

export default DoubleNavigationWithFixedSideNavFixedNavbar;
<body class="light-blue-skin">

Double Navigation with fixed SideNav & non-fixed Navbar MDB Pro component

Website with a regular fixed Navbar. Live preview
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { Navbar, NavbarNav, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Fa, SideNavItem, SideNavCat, SideNavNav, SideNav, Container } from 'mdbreact';

class DoubleNavigationWithFixedSideNavNonFixedNavbar extends React.Component  {
constructor(props) {
    super(props);
    this.state = {
        collapse: false,
        isWideEnough: false,
        dropdownOpen: false,
        toggleStateA: false,
        accordion: false,
        collapsed: false,
    };
  this.onClick = this.onClick.bind(this);
  this.toggle = this.toggle.bind(this);
  this.onClick0 = this.onClick0.bind(this);
  this.onClick1 = this.onClick1.bind(this);
  this.onClick2 = this.onClick2.bind(this);
  this.onClick3 = this.onClick3.bind(this);
  this.handleToggleClickA = this.handleToggleClickA.bind(this);
}

onClick0(){
  let state = '';

  if (this.state.accordion !== 0) {
    state = 0;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}

onClick1(){
  let state = '';

  if (this.state.accordion !== 1) {
    state = 1;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}

onClick2(){
  let state = '';

  if (this.state.accordion !== 2) {
    state = 2;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}

onClick3(){
  let state = '';

  if (this.state.accordion !== 3) {
    state = 3;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}

onClick4(){
  let state = '';

  if (this.state.accordion !== 4) {
    state = 4;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}


// Slide out buttons event handlers
handleToggleClickA(){
  this.setState({
    toggleStateA: !this.state.toggleStateA
  })
}
onClick(){
    this.setState({
        collapse: !this.state.collapse,
    });
}

toggle() {
    this.setState({
        dropdownOpen: !this.state.dropdownOpen
    });
}

render() {
  const isOpenWithButtonA = this.state.toggleStateA;
  const navStyle = { backgroundColor: "#3f5c80", color: "#fff"}
  const sideStyle = { backgroundColor: '#6a9ed3', width: "100%"}
  const mainStyle={margin: "0 auto", maxWidth: "1000px", paddingTop: '5.5rem'};
  const button1 = <div href="#!" onClick={this.handleToggleClickA} key="sideNavToggleA" style={{lineHeight: '32px', marginRight: '1em', verticalAlign: 'middle'}}><Fa icon="bars" color="white" size="2x"></Fa></div>
  const specialCaseNavbarStyles = {WebkitBoxOrient: 'horizontal', flexDirection: 'row'};
    return (
        <Router>
          <div className="mt-5">
            <SideNav logo="https://mdbootstrap.com/img/logo/mdb-transparent.png" isOpenWithButton={isOpenWithButtonA} breakWidth={1300} style={sideStyle}>
              <li>
                <ul className="social">
                  <li><a href="#!"><Fa icon="facebook"></Fa></a></li>
                  <li><a href="#!"><Fa icon="pinterest"></Fa></a></li>
                  <li><a href="#!"><Fa icon="google-plus"></Fa></a></li>
                  <li><a href="#!"><Fa icon="twitter"></Fa></a></li>
                </ul>
              </li>
              <SideNavNav>
                <SideNavCat name="Submit blog" onClick={this.onClick0} isOpen={this.state.accordion === 0 } icon="chevron-right">
                    <SideNavItem>Submit listing</SideNavItem>
                    <SideNavItem>Registration form</SideNavItem>
                </SideNavCat>
                <SideNavCat name="Instruction" onClick={this.onClick1} isOpen={this.state.accordion === 1 } icon="hand-pointer-o">
                  <SideNavItem>For bloggers</SideNavItem>
                  <SideNavItem>For authors</SideNavItem>
                </SideNavCat>
                <SideNavCat name="About" onClick={this.onClick2} isOpen={this.state.accordion === 2 } icon="eye">
                  <SideNavItem>Instruction</SideNavItem>
                  <SideNavItem>Monthly meetings</SideNavItem>
                </SideNavCat>
                <SideNavCat name="Contact me" onClick={this.onClick3} isOpen={this.state.accordion === 3 } icon="envelope-o">
                  <SideNavItem>FAQ</SideNavItem>
                  <SideNavItem>Write a message</SideNavItem>
                </SideNavCat>
              </SideNavNav>
            </SideNav>
            <Navbar style={navStyle} dark expand="md">
              <NavbarNav left>
              <NavItem>
                    {button1}
              </NavItem>
                <NavItem className="d-none d-md-inline" style={{paddingTop: 5}}>
                    <strong>Material Design for Bootstrap</strong>
                </NavItem>
              </NavbarNav>
              <NavbarNav right style={specialCaseNavbarStyles}>
                <NavItem active>
                    <NavLink to="#!"><Fa icon="envelope" className="d-inline-inline"/>  <div className="d-none d-md-inline">Contact</div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink to="#!"><Fa icon="comments-o" className="d-inline-inline"/> <div className="d-none d-md-inline">Support</div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink to="#!"><Fa icon="user" className="d-inline-inline"/>  <div className="d-none d-md-inline">Account</div></NavLink>
                </NavItem>
                <NavItem>
                  <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                    <DropdownToggle nav caret> <div className="d-none d-md-inline">Dropdown</div></DropdownToggle>
                    <DropdownMenu right>
                      <DropdownItem href="#!">Action</DropdownItem>
                      <DropdownItem href="#!">Another Action</DropdownItem>
                      <DropdownItem href="#!">Something else here</DropdownItem>
                      <DropdownItem href="#!">Something else here</DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                </NavItem>
              </NavbarNav>
            </Navbar>
            <main style={mainStyle}>
              <Container fluid style={{height: 2000}} className="mt-5">
                <h2>Advanced Double Navigation with fixed SideNav & non-fixed Navbar:</h2><br/>
                <h5>1. Fixed side menu, hidden on small devices.</h5>
                <h5>2. Non-fixed Navbar. It will disappear when you scroll down.</h5>
              </Container>
            </main>
            </div>
        </Router>
    );
  }
};

export default DoubleNavigationWithFixedSideNavNonFixedNavbar;
<body class="pink-skin">

Double Navigation with hidden SideNav & fixed Navbar MDB Pro component

Website with a regular fixed Navbar. Live preview
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { Navbar, NavbarNav, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Fa, SideNavItem, SideNavCat, SideNavNav, SideNav, Container } from 'mdbreact';

class DoubleNavigationWithHiddenSideNavFixedNavbar extends React.Component  {
constructor(props) {
    super(props);
    this.state = {
        collapse: false,
        isWideEnough: false,
        dropdownOpen: false,
        toggleStateA: false,
        accordion: false,
        collapsed: false,
    };
  this.onClick = this.onClick.bind(this);
  this.toggle = this.toggle.bind(this);
  this.onClick0 = this.onClick0.bind(this);
  this.onClick1 = this.onClick1.bind(this);
  this.onClick2 = this.onClick2.bind(this);
  this.onClick3 = this.onClick3.bind(this);
  this.handleToggleClickA = this.handleToggleClickA.bind(this);
}

onClick0(){
  let state = '';

  if (this.state.accordion !== 0) {
    state = 0;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}

onClick1(){
  let state = '';

  if (this.state.accordion !== 1) {
    state = 1;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}

onClick2(){
  let state = '';

  if (this.state.accordion !== 2) {
    state = 2;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}

onClick3(){
  let state = '';

  if (this.state.accordion !== 3) {
    state = 3;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}

onClick4(){
  let state = '';

  if (this.state.accordion !== 4) {
    state = 4;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}


// Slide out buttons event handlers
handleToggleClickA(){
  this.setState({
    toggleStateA: !this.state.toggleStateA
  })
}
onClick(){
    this.setState({
        collapse: !this.state.collapse,
    });
}

toggle() {
    this.setState({
        dropdownOpen: !this.state.dropdownOpen
    });
}

render() {
  const isOpenWithButtonA = this.state.toggleStateA;
  const navStyle = { backgroundColor: "#3f5c80", color: "#fff"}
  const sideStyle = { backgroundColor: '#6a9ed3', width: "100%"}
  const mainStyle={margin: "0 auto", maxWidth: "1000px", paddingTop: '5.5rem'};
  const button1 = <div href="#!" onClick={this.handleToggleClickA} key="sideNavToggleA" style={{lineHeight: '32px', marginRight: '1em', verticalAlign: 'middle'}}><Fa icon="bars" color="white" size="2x"></Fa></div>
  const specialCaseNavbarStyles = {WebkitBoxOrient: 'horizontal', flexDirection: 'row'};
    return (
        <Router>
          <div className="mt-5">
            <SideNav logo="https://mdbootstrap.com/img/logo/mdb-transparent.png" isOpenWithButton={isOpenWithButtonA} breakWidth={1300} style={sideStyle} hidden>
              <li>
                <ul className="social">
                  <li><a href="#!"><Fa icon="facebook"></Fa></a></li>
                  <li><a href="#!"><Fa icon="pinterest"></Fa></a></li>
                  <li><a href="#!"><Fa icon="google-plus"></Fa></a></li>
                  <li><a href="#!"><Fa icon="twitter"></Fa></a></li>
                </ul>
              </li>
              <SideNavNav>
                <SideNavCat name="Submit blog" onClick={this.onClick0} isOpen={this.state.accordion === 0 } icon="chevron-right">
                    <SideNavItem>Submit listing</SideNavItem>
                    <SideNavItem>Registration form</SideNavItem>
                </SideNavCat>
                <SideNavCat name="Instruction" onClick={this.onClick1} isOpen={this.state.accordion === 1 } icon="hand-pointer-o">
                  <SideNavItem>For bloggers</SideNavItem>
                  <SideNavItem>For authors</SideNavItem>
                </SideNavCat>
                <SideNavCat name="About" onClick={this.onClick2} isOpen={this.state.accordion === 2 } icon="eye">
                  <SideNavItem>Instruction</SideNavItem>
                  <SideNavItem>Monthly meetings</SideNavItem>
                </SideNavCat>
                <SideNavCat name="Contact me" onClick={this.onClick3} isOpen={this.state.accordion === 3 } icon="envelope-o">
                  <SideNavItem>FAQ</SideNavItem>
                  <SideNavItem>Write a message</SideNavItem>
                </SideNavCat>
              </SideNavNav>
            </SideNav>
            <Navbar style={navStyle} dark expand="md" fixed="top">
              <NavbarNav left>
              <NavItem>
                    {button1}
              </NavItem>
                <NavItem className="d-none d-md-inline" style={{paddingTop: 5}}>
                    <strong>Material Design for Bootstrap</strong>
                </NavItem>
              </NavbarNav>
              <NavbarNav right style={specialCaseNavbarStyles}>
                <NavItem active>
                    <NavLink to="#!"><Fa icon="envelope" className="d-inline-inline"/>  <div className="d-none d-md-inline">Contact</div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink to="#!"><Fa icon="comments-o" className="d-inline-inline"/> <div className="d-none d-md-inline">Support</div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink to="#!"><Fa icon="user" className="d-inline-inline"/>  <div className="d-none d-md-inline">Account</div></NavLink>
                </NavItem>
                <NavItem>
                  <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                    <DropdownToggle nav caret> <div className="d-none d-md-inline">Dropdown</div></DropdownToggle>
                    <DropdownMenu right>
                      <DropdownItem href="#!">Action</DropdownItem>
                      <DropdownItem href="#!">Another Action</DropdownItem>
                      <DropdownItem href="#!">Something else here</DropdownItem>
                      <DropdownItem href="#!">Something else here</DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                </NavItem>
              </NavbarNav>
            </Navbar>
            <main style={mainStyle}>
              <Container fluid style={{height: 2000}} className="mt-5">
                <h2>Advanced Double Navigation with hidden SideNav & fixed Navbar:</h2><br/>
                <h5>1. Hidden side menu. Click "hamburger" icon in the top left corner to open it.
                </h5>
                <h5>2. Fixed navbar. It will always stay visible on the top, even when you scroll down.
                .</h5>
              </Container>
            </main>
            </div>
        </Router>
    );
  }
};

export default DoubleNavigationWithHiddenSideNavFixedNavbar;
<body class="mdb-skin">

Double Navigation with hidden SideNav & non-fixed Navbar MDB Pro component

Website with a regular fixed Navbar. Live preview
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { Navbar, NavbarNav, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Fa, SideNavItem, SideNavCat, SideNavNav, SideNav, Container } from 'mdbreact';

class DoubleNavigationWithHiddenSideNavNonFixedNavbar extends React.Component  {
constructor(props) {
    super(props);
    this.state = {
        collapse: false,
        isWideEnough: false,
        dropdownOpen: false,
        toggleStateA: false,
        accordion: false,
        collapsed: false,
    };
  this.onClick = this.onClick.bind(this);
  this.toggle = this.toggle.bind(this);
  this.onClick0 = this.onClick0.bind(this);
  this.onClick1 = this.onClick1.bind(this);
  this.onClick2 = this.onClick2.bind(this);
  this.onClick3 = this.onClick3.bind(this);
  this.handleToggleClickA = this.handleToggleClickA.bind(this);
}

onClick0(){
  let state = '';

  if (this.state.accordion !== 0) {
    state = 0;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}

onClick1(){
  let state = '';

  if (this.state.accordion !== 1) {
    state = 1;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}

onClick2(){
  let state = '';

  if (this.state.accordion !== 2) {
    state = 2;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}

onClick3(){
  let state = '';

  if (this.state.accordion !== 3) {
    state = 3;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}

onClick4(){
  let state = '';

  if (this.state.accordion !== 4) {
    state = 4;
  } else {
    state = false;
  }

  this.setState({
    collapse: !this.state.collapse,
    accordion: state});
}


// Slide out buttons event handlers
handleToggleClickA(){
  this.setState({
    toggleStateA: !this.state.toggleStateA
  })
}
onClick(){
    this.setState({
        collapse: !this.state.collapse,
    });
}

toggle() {
    this.setState({
        dropdownOpen: !this.state.dropdownOpen
    });
}

render() {
  const isOpenWithButtonA = this.state.toggleStateA;
  const navStyle = { backgroundColor: "#3f5c80", color: "#fff"}
  const sideStyle = { backgroundColor: '#6a9ed3', width: "100%"}
  const mainStyle={margin: "0 auto", maxWidth: "1000px", paddingTop: '5.5rem'};
  const button1 = <div href="#!" onClick={this.handleToggleClickA} key="sideNavToggleA" style={{lineHeight: '32px', marginRight: '1em', verticalAlign: 'middle'}}><Fa icon="bars" color="white" size="2x"></Fa></div>
  const specialCaseNavbarStyles = {WebkitBoxOrient: 'horizontal', flexDirection: 'row'};
    return (
        <Router>
          <div className="mt-5">
            <SideNav logo="https://mdbootstrap.com/img/logo/mdb-transparent.png" isOpenWithButton={isOpenWithButtonA} breakWidth={1300} style={sideStyle} hidden>
              <li>
                <ul className="social">
                  <li><a href="#!"><Fa icon="facebook"></Fa></a></li>
                  <li><a href="#!"><Fa icon="pinterest"></Fa></a></li>
                  <li><a href="#!"><Fa icon="google-plus"></Fa></a></li>
                  <li><a href="#!"><Fa icon="twitter"></Fa></a></li>
                </ul>
              </li>
              <SideNavNav>
                <SideNavCat name="Submit blog" onClick={this.onClick0} isOpen={this.state.accordion === 0 } icon="chevron-right">
                    <SideNavItem>Submit listing</SideNavItem>
                    <SideNavItem>Registration form</SideNavItem>
                </SideNavCat>
                <SideNavCat name="Instruction" onClick={this.onClick1} isOpen={this.state.accordion === 1 } icon="hand-pointer-o">
                  <SideNavItem>For bloggers</SideNavItem>
                  <SideNavItem>For authors</SideNavItem>
                </SideNavCat>
                <SideNavCat name="About" onClick={this.onClick2} isOpen={this.state.accordion === 2 } icon="eye">
                  <SideNavItem>Instruction</SideNavItem>
                  <SideNavItem>Monthly meetings</SideNavItem>
                </SideNavCat>
                <SideNavCat name="Contact me" onClick={this.onClick3} isOpen={this.state.accordion === 3 } icon="envelope-o">
                  <SideNavItem>FAQ</SideNavItem>
                  <SideNavItem>Write a message</SideNavItem>
                </SideNavCat>
              </SideNavNav>
            </SideNav>
            <Navbar style={navStyle} dark expand="md">
              <NavbarNav left>
              <NavItem>
                    {button1}
              </NavItem>
                <NavItem className="d-none d-md-inline" style={{paddingTop: 5}}>
                    <strong>Material Design for Bootstrap</strong>
                </NavItem>
              </NavbarNav>
              <NavbarNav right style={specialCaseNavbarStyles}>
                <NavItem active>
                    <NavLink to="#!"><Fa icon="envelope" className="d-inline-inline"/>  <div className="d-none d-md-inline">Contact</div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink to="#!"><Fa icon="comments-o" className="d-inline-inline"/> <div className="d-none d-md-inline">Support</div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink to="#!"><Fa icon="user" className="d-inline-inline"/>  <div className="d-none d-md-inline">Account</div></NavLink>
                </NavItem>
                <NavItem>
                  <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                    <DropdownToggle nav caret> <div className="d-none d-md-inline">Dropdown</div></DropdownToggle>
                    <DropdownMenu right>
                      <DropdownItem href="#!">Action</DropdownItem>
                      <DropdownItem href="#!">Another Action</DropdownItem>
                      <DropdownItem href="#!">Something else here</DropdownItem>
                      <DropdownItem href="#!">Something else here</DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                </NavItem>
              </NavbarNav>
            </Navbar>
            <main style={mainStyle}>
              <Container fluid style={{height: 2000}} className="mt-5">
                <h2>Advanced Double Navigation with hidden SideNav & non-fixed Navbar:</h2><br/>
                <h5>1. Hidden side menu. Click "hamburger" icon in the top left corner to open it.</h5>
                <h5>2. Non-fixed Navbar. It will disappear when you scroll down.</h5>
              </Container>
            </main>
            </div>
        </Router>
    );
  }
};

export default DoubleNavigationWithHiddenSideNavNonFixedNavbar;
<body class="grey-skin">