Rate these docs

React Bootstrap Navigation

React Navigation - Bootstrap 4 & Material Design


React Bootstrap navigation is a combination of navbar, sidenav, and footer in various forms and different functionalities like non-fixed navbar or hidden sidenav.

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 from 'react';
        import { MDBContainer, MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBIcon } 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: '#e91e63'}
            const container = {height: 1300}
            return(
              <div>
                <Router>
                  <header>
                    <MDBNavbar style={bgPink} dark expand="md" scrolling fixed="top">
                      <MDBNavbarBrand href="/">
                          <strong>Navbar</strong>
                      </MDBNavbarBrand>
                      <MDBNavbarToggler onClick={ this.onClick } />
                      <MDBCollapse isOpen = { this.state.collapse } navbar>
                        <MDBNavbarNav left>
                          <MDBNavItem active>
                              <MDBNavLink to="#">Home</MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                              <MDBNavLink to="#">Features</MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                              <MDBNavLink to="#">Pricing</MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#">Options</MDBNavLink>
                          </MDBNavItem>
                        </MDBNavbarNav>
                        <MDBNavbarNav right>
                          <MDBNavItem>
                            <MDBNavLink to="#"><MDBIcon fab icon="facebook-f" /></MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#"><MDBIcon fab icon="twitter" /></MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#"><MDBIcon fab icon="instagram" /></MDBNavLink>
                          </MDBNavItem>
                        </MDBNavbarNav>
                      </MDBCollapse>
                    </MDBNavbar>
                  </header>
                </Router>
                <MDBContainer style={container} className="text-center mt-5 pt-5">
                  <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>
                </MDBContainer>
              </div>
            );
          }
        }

        export default FixedNavbarExample;

      

Regular non-fixed Navbar

Website with a regular fixed Navbar. Live preview


        import React from 'react';
        import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBIcon, MDBContainer } 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>
                  <header>
                    <MDBNavbar color="default-color" dark expand="md">
                      <MDBNavbarBrand href="/">
                        <strong>Navbar</strong>
                      </MDBNavbarBrand>
                      <MDBNavbarToggler onClick={this.onClick} />
                      <MDBCollapse isOpen={this.state.collapse} navbar>
                        <MDBNavbarNav left>
                          <MDBNavItem active>
                            <MDBNavLink to="#">Home</MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#">Features</MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#">Pricing</MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#">Opinions</MDBNavLink>
                          </MDBNavItem>
                        </MDBNavbarNav>
                        <MDBNavbarNav right>
                          <MDBNavItem>
                            <MDBNavLink to="#"><MDBIcon fab icon="facebook-f" /></MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#"><MDBIcon fab icon="twitter" /></MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#"><MDBIcon fab icon="instagram" /></MDBNavLink>
                          </MDBNavItem>
                        </MDBNavbarNav>
                      </MDBCollapse>
                    </MDBNavbar>
                  </header>
                </Router>
                <MDBContainer style={container} className="text-center mt-5">
                  <h2>This Navbar isn't fixed</h2>
                  <h5>When you scroll down it will disappear</h5>
                </MDBContainer>
              </div>
            );
          }
        }

        export default NonFixedNavbarExample;
      

Full Page Intro with non-fixed Navbar

Website with a regular fixed Navbar. Live preview


        import React from 'react';
        import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBContainer, MDBView, MDBMask } 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>
                  <header>
                    <MDBNavbar color="black" fixed="top" dark expand="md">
                      <MDBContainer>
                        <MDBNavbarBrand href="/">
                          <strong>Navbar</strong>
                        </MDBNavbarBrand>
                        <MDBNavbarToggler onClick={this.onClick} />
                        <MDBCollapse isOpen={this.state.collapse} navbar>
                          <MDBNavbarNav left>
                            <MDBNavItem active>
                              <MDBNavLink to="#">Home</MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink to="#">Link</MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink to="#">Profile</MDBNavLink>
                            </MDBNavItem>
                          </MDBNavbarNav>
                        </MDBCollapse>
                      </MDBContainer>
                    </MDBNavbar>

                  </Router>
                  <MDBView src="https://mdbootstrap.com/img/Photos/Others/img%20(51).jpg">
                    <MDBMask overlay="black-strong" className="flex-center flex-column 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>
                    </MDBMask>
                  </MDBView>
                </header>

                <main>
                  <MDBContainer 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>
                  </MDBContainer>
                </main>
              </div>
            );
          }
        }

        export default FullPageIntroWithNonFixedNavbar;

      

Full Page Intro with fixed Navbar

Website with a regular fixed Navbar. Live preview


        import React from 'react';
        import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBContainer, MDBMask, MDBView } 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>
                    <MDBNavbar color="indigo" dark expand="md" fixed="top">
                      <MDBNavbarBrand href="/">
                        <strong>Navbar</strong>
                      </MDBNavbarBrand>
                      {!this.state.isWideEnough && <MDBNavbarToggler onClick={this.onClick} />}
                      <MDBCollapse isOpen={this.state.collapse} navbar>
                        <MDBNavbarNav left>
                          <MDBNavItem active>
                            <MDBNavLink to="#">Home</MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#">Link</MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#">Profile</MDBNavLink>
                          </MDBNavItem>
                        </MDBNavbarNav>
                      </MDBCollapse>
                    </MDBNavbar>
                  </Router>

                  <MDBView src="https://mdbootstrap.com/img/Photos/Others/img%20(50).jpg">
                    <MDBMask overlay="black-light" className="flex-center flex-column 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>
                    </MDBMask>
                  </MDBView>
                </header>

                <main>
                  <MDBContainer 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>
                  </MDBContainer>
                </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 { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBContainer, MDBMask, MDBView } 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>
                    <MDBNavbar color="bg-primary" fixed="top" dark expand="md" scrolling transparent>
                      <MDBNavbarBrand href="/">
                        <strong>Navbar</strong>
                      </MDBNavbarBrand>
                      {!this.state.isWideEnough && <MDBNavbarToggler onClick={this.onClick} />}
                      <MDBCollapse isOpen={this.state.collapse} navbar>
                        <MDBNavbarNav left>
                          <MDBNavItem active>
                            <MDBNavLink to="#">Home</MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#">Link</MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#">Profile</MDBNavLink>
                          </MDBNavItem>
                        </MDBNavbarNav>
                      </MDBCollapse>
                    </MDBNavbar>
                  </Router>

                  <MDBView src="https://mdbootstrap.com/img/Photos/Others/img%20(40).jpg">
                    <MDBMask overlay="purple-light" className="flex-center flex-column 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>
                    </MDBMask>
                  </MDBView>
                </header>

                <main>
                  <MDBContainer 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>
                  </MDBContainer>
                </main>
              </div>
            );
          }
        }

        export default FullPageIntroWithFixedTransparentNavbar;
      

Full Page Intro with non-fixed, transparent Navbar

Website with a regular fixed Navbar. Live preview

        import React from 'react';
        import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBContainer, MDBMask, MDBView } 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>
                  <MDBView src="https://mdbootstrap.com/img/Photos/Others/img%20(42).jpg">
                    <Router>
                      <MDBNavbar dark expand="md">
                        <MDBContainer>
                          <MDBNavbarBrand href="/">
                            <strong>Navbar</strong>
                          </MDBNavbarBrand>
                          <MDBNavbarToggler onClick={this.onClick} />
                          <MDBCollapse isOpen={this.state.collapse} navbar>
                            <MDBNavbarNav left>
                              <MDBNavItem active>
                                <MDBNavLink to="#">Home</MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink to="#">Link</MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink to="#">Profile</MDBNavLink>
                              </MDBNavItem>
                            </MDBNavbarNav>
                          </MDBCollapse>
                        </MDBContainer>
                      </MDBNavbar>
                    </Router>

                    <MDBMask overlay="indigo-slight" className="flex-center flex-column 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>
                    </MDBMask>
                  </MDBView>
                </header>

                <main>
                  <MDBContainer 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>
                  </MDBContainer>
                </main>
              </div>
            );
          }
        }

        export default FullPageIntroWithNonFixedTransparentNavbar;
      

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 { MDBInput, MDBNavbar, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBIcon, MDBSideNavItem, MDBSideNavCat, MDBSideNavNav, MDBSideNav, MDBContainer } 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">
                  <MDBSideNav
                    logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
                    triggerOpening={this.state.toggleStateA}
                    breakWidth={this.state.breakWidth}
                    bg="https://mdbootstrap.com/img/Photos/Others/sidenav4.jpg"
                    mask="strong"
                    fixed
                  >
                    <li>
                      <ul className="social">
                        <li>
                          <a href="#!">
                            <MDBIcon fab icon="facebook-f" />
                          </a>
                        </li>
                        <li>
                          <a href="#!">
                            <MDBIcon fab icon="pinterest" />
                          </a>
                        </li>
                        <li>
                          <a href="#!">
                            <MDBIcon fab icon="google-plus-g" />
                          </a>
                        </li>
                        <li>
                          <a href="#!">
                            <MDBIcon fab icon="twitter" />
                          </a>
                        </li>
                      </ul>
                    </li>
                    <MDBInput
                      type="text"
                      default="Search"
                      style={{
                        color: "#fff",
                        padding: "0 10px 8px 30px",
                        boxSizing: "border-box"
                      }}
                    />
                    <MDBSideNavNav>
                      <MDBSideNavCat
                        name="Submit blog"
                        id="submit-blog-cat"
                        icon="chevron-right"
                      >
                        <MDBSideNavItem>Submit listing</MDBSideNavItem>
                        <MDBSideNavItem>Registration form</MDBSideNavItem>
                      </MDBSideNavCat>
                      <MDBSideNavCat
                        iconRegular
                        name="Instruction"
                        id="instruction-cat"
                        icon="hand-pointer"
                      >
                        <MDBSideNavItem>For bloggers</MDBSideNavItem>
                        <MDBSideNavItem>For authors</MDBSideNavItem>
                      </MDBSideNavCat>
                      <MDBSideNavCat name="About" id="about-cat" icon="eye">
                        <MDBSideNavItem>Instruction</MDBSideNavItem>
                        <MDBSideNavItem>Monthly meetings</MDBSideNavItem>
                      </MDBSideNavCat>
                      <MDBSideNavCat
                        name="Contact me"
                        id="contact-me-cat"
                        icon="envelope"
                      >
                        <MDBSideNavItem>FAQ</MDBSideNavItem>
                        <MDBSideNavItem>Write a message</MDBSideNavItem>
                      </MDBSideNavCat>
                    </MDBSideNavNav>
                  </MDBSideNav>
                  <MDBNavbar style={navStyle} double expand="md" fixed="top" scrolling>
                    <MDBNavbarNav left>
                      <MDBNavItem>
                        <div
                          onClick={this.handleToggleClickA}
                          key="sideNavToggleA"
                          style={{
                            lineHeight: "32px",
                            marginRight: "1em",
                            verticalAlign: "middle"
                          }}
                        >
                          <MDBIcon icon="bars" color="white" size="2x" />
                        </div>
                      </MDBNavItem>
                      <MDBNavItem className="d-none d-md-inline" style={{ paddingTop: 5 }}>
                        Material Design for Bootstrap
                      </MDBNavItem>
                    </MDBNavbarNav>
                    <MDBNavbarNav right style={specialCaseNavbarStyles}>
                      <MDBNavItem active>
                        <MDBNavLink to="#!">
                          <MDBIcon icon="envelope" className="d-inline-inline" />{" "}
                          <div className="d-none d-md-inline">Contact</div>
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">
                          <MDBIcon far icon="comments" className="d-inline-inline" />{" "}
                          <div className="d-none d-md-inline">Support</div>
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">
                          <MDBIcon icon="user" className="d-inline-inline" />{" "}
                          <div className="d-none d-md-inline">Account</div>
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBDropdown>
                          <MDBDropdownToggle nav caret>
                            <div className="d-none d-md-inline">Dropdown</div>
                          </MDBDropdownToggle>
                          <MDBDropdownMenu right>
                            <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                            <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                            <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                            <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                          </MDBDropdownMenu>
                        </MDBDropdown>
                      </MDBNavItem>
                    </MDBNavbarNav>
                  </MDBNavbar>
                  <main style={mainStyle}>
                    <MDBContainer 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>
                    </MDBContainer>
                  </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 { MDBInput, MDBNavbar, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBIcon, MDBSideNavItem, MDBSideNavCat, MDBSideNavNav, MDBSideNav, MDBContainer } 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 pink-skin">
                  <MDBSideNav
                    logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
                    triggerOpening={this.state.toggleStateA}
                    breakWidth={this.state.breakWidth}
                    bg="https://mdbootstrap.com/img/Photos/Others/sidenav4.jpg"
                    mask="strong"
                    fixed
                  >
                    <li>
                      <ul className="social">
                        <li>
                          <a href="#!">
                            <MDBIcon fab icon="facebook-f" />
                          </a>
                        </li>
                        <li>
                          <a href="#!">
                            <MDBIcon fab icon="pinterest" />
                          </a>
                        </li>
                        <li>
                          <a href="#!">
                            <MDBIcon fab icon="google-plus-g" />
                          </a>
                        </li>
                        <li>
                          <a href="#!">
                            <MDBIcon fab icon="twitter" />
                          </a>
                        </li>
                      </ul>
                    </li>
                    <MDBInput
                      type="text"
                      default="Search"
                      style={{
                        color: "#fff",
                        padding: "0 10px 8px 30px",
                        boxSizing: "border-box"
                      }}
                    />
                    <MDBSideNavNav>
                      <MDBSideNavCat
                        name="Submit blog"
                        id="submit-blog-cat"
                        icon="chevron-right"
                      >
                        <MDBSideNavItem>Submit listing</MDBSideNavItem>
                        <MDBSideNavItem>Registration form</MDBSideNavItem>
                      </MDBSideNavCat>
                      <MDBSideNavCat
                        iconRegular
                        name="Instruction"
                        id="instruction-cat"
                        icon="hand-pointer"
                      >
                        <MDBSideNavItem>For bloggers</MDBSideNavItem>
                        <MDBSideNavItem>For authors</MDBSideNavItem>
                      </MDBSideNavCat>
                      <MDBSideNavCat name="About" id="about-cat" icon="eye">
                        <MDBSideNavItem>Instruction</MDBSideNavItem>
                        <MDBSideNavItem>Monthly meetings</MDBSideNavItem>
                      </MDBSideNavCat>
                      <MDBSideNavCat
                        name="Contact me"
                        id="contact-me-cat"
                        icon="envelope"
                      >
                        <MDBSideNavItem>FAQ</MDBSideNavItem>
                        <MDBSideNavItem>Write a message</MDBSideNavItem>
                      </MDBSideNavCat>
                    </MDBSideNavNav>
                  </MDBSideNav>
                  <MDBNavbar style={navStyle} double expand="md">
                    <MDBNavbarNav left>
                      <MDBNavItem>
                        <div
                          onClick={this.handleToggleClickA}
                          key="sideNavToggleA"
                          style={{
                            lineHeight: "32px",
                            marginRight: "1em",
                            verticalAlign: "middle"
                          }}
                        >
                          <MDBIcon icon="bars" color="white" size="2x" />
                        </div>
                      </MDBNavItem>
                      <MDBNavItem className="d-none d-md-inline" style={{ paddingTop: 5 }}>
                        Material Design for Bootstrap
                      </MDBNavItem>
                    </MDBNavbarNav>
                    <MDBNavbarNav right style={specialCaseNavbarStyles}>
                      <MDBNavItem active>
                        <MDBNavLink to="#!">
                          <MDBIcon icon="envelope" className="d-inline-inline" />{" "}
                          <div className="d-none d-md-inline">Contact</div>
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">
                          <MDBIcon far icon="comments" className="d-inline-inline" />{" "}
                          <div className="d-none d-md-inline">Support</div>
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">
                          <MDBIcon icon="user" className="d-inline-inline" />{" "}
                          <div className="d-none d-md-inline">Account</div>
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBDropdown>
                          <MDBDropdownToggle nav caret>
                            <div className="d-none d-md-inline">Dropdown</div>
                          </MDBDropdownToggle>
                          <MDBDropdownMenu right>
                            <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                            <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                            <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                            <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                          </MDBDropdownMenu>
                        </MDBDropdown>
                      </MDBNavItem>
                    </MDBNavbarNav>
                  </MDBNavbar>
                  <main style={mainStyle}>
                    <MDBContainer 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>
                    </MDBContainer>
                  </main>
                </div>
              </Router>
            );
          }
        }

        export default DoubleNavigationPage;
      

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 { MDBInput, MDBNavbar, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBIcon, MDBSideNavItem, MDBSideNavCat, MDBSideNavNav, MDBSideNav, MDBContainer } from "mdbreact";

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

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

          render() {
            const mainStyle = {
              paddingTop: "5rem"
            };

            const specialCaseNavbarStyles = {
              WebkitBoxOrient: "horizontal",
              flexDirection: "row"
            };

            return (
              <Router>
                <div className="mdb-skin">
                  <MDBSideNav
                    logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
                    triggerOpening={this.state.toggleStateA}
                    bg="https://mdbootstrap.com/img/Photos/Others/sidenav4.jpg"
                    mask="strong"
                    hidden
                  >
                    <li>
                      <ul className="social">
                        <li>
                          <a href="#!">
                            <MDBIcon fab icon="facebook-f" />
                          </a>
                        </li>
                        <li>
                          <a href="#!">
                            <MDBIcon fab icon="pinterest" />
                          </a>
                        </li>
                        <li>
                          <a href="#!">
                            <MDBIcon fab icon="google-plus-g" />
                          </a>
                        </li>
                        <li>
                          <a href="#!">
                            <MDBIcon fab icon="twitter" />
                          </a>
                        </li>
                      </ul>
                    </li>
                    <MDBInput
                      type="text"
                      default="Search"
                      style={{
                        color: "#fff",
                        padding: "0 10px 8px 30px",
                        boxSizing: "border-box"
                      }}
                    />
                    <MDBSideNavNav>
                      <MDBSideNavCat
                        name="Submit blog"
                        id="submit-blog-cat"
                        icon="chevron-right"
                      >
                        <MDBSideNavItem>Submit listing</MDBSideNavItem>
                        <MDBSideNavItem>Registration form</MDBSideNavItem>
                      </MDBSideNavCat>
                      <MDBSideNavCat
                        iconRegular
                        name="Instruction"
                        id="instruction-cat"
                        icon="hand-pointer"
                      >
                        <MDBSideNavItem>For bloggers</MDBSideNavItem>
                        <MDBSideNavItem>For authors</MDBSideNavItem>
                      </MDBSideNavCat>
                      <MDBSideNavCat name="About" id="about-cat" icon="eye">
                        <MDBSideNavItem>Instruction</MDBSideNavItem>
                        <MDBSideNavItem>Monthly meetings</MDBSideNavItem>
                      </MDBSideNavCat>
                      <MDBSideNavCat
                        name="Contact me"
                        id="contact-me-cat"
                        icon="envelope"
                      >
                        <MDBSideNavItem>FAQ</MDBSideNavItem>
                        <MDBSideNavItem>Write a message</MDBSideNavItem>
                      </MDBSideNavCat>
                    </MDBSideNavNav>
                  </MDBSideNav>
                  <MDBNavbar double expand="md" fixed="top" scrolling>
                    <MDBNavbarNav left>
                      <MDBNavItem>
                        <div
                          onClick={this.handleToggleClickA}
                          key="sideNavToggleA"
                          style={{
                            lineHeight: "32px",
                            marginRight: "1em",
                            verticalAlign: "middle"
                          }}
                        >
                          <MDBIcon icon="bars" color="white" size="2x" />
                        </div>
                      </MDBNavItem>
                      <MDBNavItem className="d-none d-md-inline" style={{ paddingTop: 5 }}>
                        Material Design for Bootstrap
                      </MDBNavItem>
                    </MDBNavbarNav>
                    <MDBNavbarNav right style={specialCaseNavbarStyles}>
                      <MDBNavItem active>
                        <MDBNavLink to="#!">
                          <MDBIcon icon="envelope" className="d-inline-inline" />{" "}
                          <div className="d-none d-md-inline">Contact</div>
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">
                          <MDBIcon far icon="comments" className="d-inline-inline" />{" "}
                          <div className="d-none d-md-inline">Support</div>
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">
                          <MDBIcon icon="user" className="d-inline-inline" />{" "}
                          <div className="d-none d-md-inline">Account</div>
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBDropdown>
                          <MDBDropdownToggle nav caret>
                            <div className="d-none d-md-inline">Dropdown</div>
                          </MDBDropdownToggle>
                          <MDBDropdownMenu right>
                            <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                            <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                            <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                            <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                          </MDBDropdownMenu>
                        </MDBDropdown>
                      </MDBNavItem>
                    </MDBNavbarNav>
                  </MDBNavbar>
                  <main style={mainStyle}>
                    <MDBContainer 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>
                    </MDBContainer>
                  </main>
                </div>
              </Router>
            );
          }
        }

        export default DoubleNavigationPage;
      

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 { MDBInput, MDBNavbar, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBIcon, MDBSideNavItem, MDBSideNavCat, MDBSideNavNav, MDBSideNav, MDBContainer } from "mdbreact";

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

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

          render() {
            const mainStyle = {
              paddingTop: "4rem"
            };

            const specialCaseNavbarStyles = {
              WebkitBoxOrient: "horizontal",
              flexDirection: "row"
            };

            return (
              <Router>
                <div className="grey-skin">
                  <MDBSideNav
                    logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
                    triggerOpening={this.state.toggleStateA}
                    bg="https://mdbootstrap.com/img/Photos/Others/sidenav4.jpg"
                    mask="strong"
                    hidden
                  >
                    <li>
                      <ul className="social">
                        <li>
                          <a href="#!">
                            <MDBIcon fab icon="facebook-f" />
                          </a>
                        </li>
                        <li>
                          <a href="#!">
                            <MDBIcon fab icon="pinterest" />
                          </a>
                        </li>
                        <li>
                          <a href="#!">
                            <MDBIcon fab icon="google-plus-g" />
                          </a>
                        </li>
                        <li>
                          <a href="#!">
                            <MDBIcon fab icon="twitter" />
                          </a>
                        </li>
                      </ul>
                    </li>
                    <MDBInput
                      type="text"
                      default="Search"
                      style={{
                        color: "#fff",
                        padding: "0 10px 8px 30px",
                        boxSizing: "border-box"
                      }}
                    />
                    <MDBSideNavNav>
                      <MDBSideNavCat
                        name="Submit blog"
                        id="submit-blog-cat"
                        icon="chevron-right"
                      >
                        <MDBSideNavItem>Submit listing</MDBSideNavItem>
                        <MDBSideNavItem>Registration form</MDBSideNavItem>
                      </MDBSideNavCat>
                      <MDBSideNavCat
                        iconRegular
                        name="Instruction"
                        id="instruction-cat"
                        icon="hand-pointer"
                      >
                        <MDBSideNavItem>For bloggers</MDBSideNavItem>
                        <MDBSideNavItem>For authors</MDBSideNavItem>
                      </MDBSideNavCat>
                      <MDBSideNavCat name="About" id="about-cat" icon="eye">
                        <MDBSideNavItem>Instruction</MDBSideNavItem>
                        <MDBSideNavItem>Monthly meetings</MDBSideNavItem>
                      </MDBSideNavCat>
                      <MDBSideNavCat
                        name="Contact me"
                        id="contact-me-cat"
                        icon="envelope"
                      >
                        <MDBSideNavItem>FAQ</MDBSideNavItem>
                        <MDBSideNavItem>Write a message</MDBSideNavItem>
                      </MDBSideNavCat>
                    </MDBSideNavNav>
                  </MDBSideNav>
                  <MDBNavbar double expand="md">
                    <MDBNavbarNav left>
                      <MDBNavItem>
                        <div
                          onClick={this.handleToggleClickA}
                          key="sideNavToggleA"
                          style={{
                            lineHeight: "32px",
                            marginRight: "1em",
                            verticalAlign: "middle"
                          }}
                        >
                          <MDBIcon icon="bars" color="white" size="2x" />
                        </div>
                      </MDBNavItem>
                      <MDBNavItem className="d-none d-md-inline" style={{ paddingTop: 5 }}>
                        Material Design for Bootstrap
                      </MDBNavItem>
                    </MDBNavbarNav>
                    <MDBNavbarNav right style={specialCaseNavbarStyles}>
                      <MDBNavItem active>
                        <MDBNavLink to="#!">
                          <MDBIcon icon="envelope" className="d-inline-inline" />{" "}
                          <div className="d-none d-md-inline">Contact</div>
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">
                          <MDBIcon far icon="comments" className="d-inline-inline" />{" "}
                          <div className="d-none d-md-inline">Support</div>
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">
                          <MDBIcon icon="user" className="d-inline-inline" />{" "}
                          <div className="d-none d-md-inline">Account</div>
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBDropdown>
                          <MDBDropdownToggle nav caret>
                            <div className="d-none d-md-inline">Dropdown</div>
                          </MDBDropdownToggle>
                          <MDBDropdownMenu right>
                            <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                            <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                            <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                            <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                          </MDBDropdownMenu>
                        </MDBDropdown>
                      </MDBNavItem>
                    </MDBNavbarNav>
                  </MDBNavbar>
                  <main style={mainStyle}>
                    <MDBContainer 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. When you scroll down it will disappear.</h5>
                    </MDBContainer>
                  </main>
                </div>
              </Router>
            );
          }
        }

        export default DoubleNavigationPage;