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

7. Double Navigation with hidden SideNav & fixed Navbar

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


Regular fixed Navbar

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

              class FixedNavbarExample extends React.Component {
                constructor(props) {
                    super(props);
                    this.state = {
                        collapse: 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>
                        <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" /></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 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,
                  };
              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>
                            <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"/></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 from 'react';
            import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Container, 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() {
            return (
                <div>
                    <Router>
                      <Navbar color="black" dark expand="md" scrolling>
                      <Container>
                        <NavbarBrand href="/">
                            <strong>Navbar</strong>
                        </NavbarBrand>
                        <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>
                      </Container>
                    </Navbar>
                  </Router>
                  <View src='https://mdbootstrap.com/img/Photos/Others/img%20(51).jpg' >
                    <Mask overlay="black-strong" style={{flexDirection: 'column', height: '100vh'}} 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>
                  <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 FullPageIntroWithNonFixedNavbar;
        

Full Page Intro with fixed Navbar

Website with a regular fixed Navbar. Live preview

            import React from 'react';
            import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Container, Mask, View} 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() {
                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 src="https://mdbootstrap.com/img/Photos/Others/img%20(50).jpg">
                        <Mask overlay="black-light" style={{flexDirection: 'column', height: '100vh'}} 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 from 'react';
            import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Container, Mask, View } from 'mdbreact';
            import { BrowserRouter as Router } from 'react-router-dom';

            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() {
              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 src="https://mdbootstrap.com/img/Photos/Others/img%20(40).jpg">
                          <Mask overlay="purple-light" style={{flexDirection: 'column', height: '100vh'}} 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 from 'react';
            import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Container, Mask, View } from 'mdbreact';
            import { BrowserRouter as Router } from 'react-router-dom';

            class FullPageIntroWithNonFixedTransparentNavbar extends React.Component {
                constructor(props) {
                  super(props);
                    this.state = {
                      collapse: false,
                  };
              this.onClick = this.onClick.bind(this);
            }
            onClick(){
                this.setState({
                  collapse: !this.state.collapse,
              });
            }
            render() {
              return (
                      <div>
                      <header>
                        <Router>
                          <Navbar dark expand="md">
                            <NavbarBrand href="/">
                                <strong>Navbar</strong>
                            </NavbarBrand>
                            <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 src="https://mdbootstrap.com/img/Photos/Others/img%20(42).jpg">
                          <Mask overlay="indigo-slight" style={{flexDirection: 'column', height: '100vh'}} 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 { Input, Navbar, NavbarNav, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Fa, SideNavItem, SideNavCat, SideNavNav, SideNav, Container } from 'mdbreact';

class DoubleNavigationPage extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
        toggleStateA: false,
        breakWidth: 1300,
        windowWidth: 0
    };
    }

    componentDidMount() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
    }
    
    componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
    }
    
    handleResize = () => this.setState({
    windowWidth: window.innerWidth
    });

    handleToggleClickA = () => {
    this.setState({
        toggleStateA: !this.state.toggleStateA
    });
    }

    render() {
    const navStyle = { paddingLeft: this.state.windowWidth > this.state.breakWidth ? '210px' : '16px' };
    const mainStyle = { margin: '0 6%', paddingTop: '5.5rem', paddingLeft: this.state.windowWidth > this.state.breakWidth ? '240px' : '0' };
    const specialCaseNavbarStyles = { WebkitBoxOrient: 'horizontal', flexDirection: 'row' };
    return (
        <Router>
        <div className="fixed-sn light-blue-skin">
            <SideNav 
            logo="https://mdbootstrap.com/img/logo/mdb-transparent.png" 
            triggerOpening={this.state.toggleStateA} 
            breakWidth={this.state.breakWidth}
            bg="https://mdbootstrap.com/img/Photos/Others/sidenav1.jpg"
            mask="strong"
            >
            <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>
            <Input type="text" default="Search" style={{ color: '#fff', padding: '8px 10px 8px 30px', boxSizing: 'border-box'}} />
            <SideNavNav>
                <SideNavCat name="Submit blog" id="submit-blog-cat" icon="chevron-right">
                    <SideNavItem>Submit listing</SideNavItem>
                    <SideNavItem>Registration form</SideNavItem>
                </SideNavCat>
                <SideNavCat name="Instruction" id="instruction-cat" icon="hand-pointer-o">
                    <SideNavItem>For bloggers</SideNavItem>
                    <SideNavItem>For authors</SideNavItem>
                </SideNavCat>
                <SideNavCat name="About" id="about-cat" icon="eye">
                    <SideNavItem>Instruction</SideNavItem>
                    <SideNavItem>Monthly meetings</SideNavItem>
                </SideNavCat>
                <SideNavCat name="Contact me" id="contact-me-cat" icon="envelope-o">
                    <SideNavItem>FAQ</SideNavItem>
                    <SideNavItem>Write a message</SideNavItem>
                </SideNavCat>
            </SideNavNav>
            </SideNav>
            <Navbar style={navStyle} double expand="md" fixed="top" scrolling>
            <NavbarNav left>
                <NavItem>
                    <div onClick={this.handleToggleClickA} key="sideNavToggleA" style={{ lineHeight: '32px', marginRight: '1em', verticalAlign: 'middle' }}><Fa icon="bars" color="white" size="2x"></Fa></div>
                </NavItem>
                <NavItem className="d-none d-md-inline" style={{ paddingTop: 5 }}>
                    Material Design for Bootstrap
                </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>
                        <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 DoubleNavigationPage;

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 { Input, Navbar, NavbarNav, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Fa, SideNavItem, SideNavCat, SideNavNav, SideNav, Container } from 'mdbreact';

class DoubleNavigationPage extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
        toggleStateA: false,
        breakWidth: 1300,
        windowWidth: 0
    };
    }

    componentDidMount() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
    }
    
    componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
    }
    
    handleResize = () => this.setState({
    windowWidth: window.innerWidth
    });

    handleToggleClickA = () => {
    this.setState({
        toggleStateA: !this.state.toggleStateA
    });
    }

    render() {
    const navStyle = { paddingLeft: this.state.windowWidth > this.state.breakWidth ? '210px' : '16px' };
    const mainStyle = { margin: '0 6%', paddingTop: '5.5rem', paddingLeft: this.state.windowWidth > this.state.breakWidth ? '240px' : '0' };
    const specialCaseNavbarStyles = { WebkitBoxOrient: 'horizontal', flexDirection: 'row' };
    return (
        <Router>
        <div className="fixed-sn light-blue-skin">
            <SideNav 
            logo="https://mdbootstrap.com/img/logo/mdb-transparent.png" 
            triggerOpening={this.state.toggleStateA} 
            breakWidth={this.state.breakWidth}
            bg="https://mdbootstrap.com/img/Photos/Others/sidenav1.jpg"
            mask="strong"
            >
            <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>
            <Input type="text" default="Search" style={{ color: '#fff', padding: '8px 10px 8px 30px', boxSizing: 'border-box'}} />
            <SideNavNav>
                <SideNavCat name="Submit blog" id="submit-blog-cat" icon="chevron-right">
                    <SideNavItem>Submit listing</SideNavItem>
                    <SideNavItem>Registration form</SideNavItem>
                </SideNavCat>
                <SideNavCat name="Instruction" id="instruction-cat" icon="hand-pointer-o">
                    <SideNavItem>For bloggers</SideNavItem>
                    <SideNavItem>For authors</SideNavItem>
                </SideNavCat>
                <SideNavCat name="About" id="about-cat" icon="eye">
                    <SideNavItem>Instruction</SideNavItem>
                    <SideNavItem>Monthly meetings</SideNavItem>
                </SideNavCat>
                <SideNavCat name="Contact me" id="contact-me-cat" icon="envelope-o">
                    <SideNavItem>FAQ</SideNavItem>
                    <SideNavItem>Write a message</SideNavItem>
                </SideNavCat>
            </SideNavNav>
            </SideNav>
            <Navbar style={navStyle} double expand="md" scrolling>
            <NavbarNav left>
                <NavItem>
                    <div onClick={this.handleToggleClickA} key="sideNavToggleA" style={{ lineHeight: '32px', marginRight: '1em', verticalAlign: 'middle' }}><Fa icon="bars" color="white" size="2x"></Fa></div>
                </NavItem>
                <NavItem className="d-none d-md-inline" style={{ paddingTop: 5 }}>
                    Material Design for Bootstrap
                </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>
                        <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 DoubleNavigationPage;

Double Navigation with hidden non-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 DoubleNavigationWithHiddenSideNavNonFixedNavbar extends React.Component  {
            constructor(props) {
                super(props);
                this.state = {
                    collapse: false,
                    dropdownOpen: false,
                    toggleStateA: false,
                };
              this.onClick = this.onClick.bind(this);
              this.toggle = this.toggle.bind(this);
              this.handleToggleClickA = this.handleToggleClickA.bind(this);
            }

            // 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"};
              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" triggerOpening={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" id="submit-blog" icon="chevron-right">
                                <SideNavItem>Submit listing</SideNavItem>
                                <SideNavItem>Registration form</SideNavItem>
                            </SideNavCat>
                            <SideNavCat name="Instruction" id="instructions" icon="hand-pointer-o">
                              <SideNavItem>For bloggers</SideNavItem>
                              <SideNavItem>For authors</SideNavItem>
                            </SideNavCat>
                            <SideNavCat name="About" id="about" icon="eye">
                              <SideNavItem>Instruction</SideNavItem>
                              <SideNavItem>Monthly meetings</SideNavItem>
                            </SideNavCat>
                            <SideNavCat name="Contact me" id="contact-me" 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="mdb-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,
            dropdownOpen: false,
            toggleStateA: false,
        };
      this.onClick = this.onClick.bind(this);
      this.toggle = this.toggle.bind(this);
      this.handleToggleClickA = this.handleToggleClickA.bind(this);
    }

    // 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" triggerOpening={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" id="submit-blog" icon="chevron-right">
                        <SideNavItem>Submit listing</SideNavItem>
                        <SideNavItem>Registration form</SideNavItem>
                    </SideNavCat>
                    <SideNavCat name="Instruction" id="instructions" icon="hand-pointer-o">
                      <SideNavItem>For bloggers</SideNavItem>
                      <SideNavItem>For authors</SideNavItem>
                    </SideNavCat>
                    <SideNavCat name="About" id="about" icon="eye">
                      <SideNavItem>Instruction</SideNavItem>
                      <SideNavItem>Monthly meetings</SideNavItem>
                    </SideNavCat>
                    <SideNavCat name="Contact me" id="contact-me" 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="grey-skin">