Bootstrap sidenav MDB Pro component

Bootstrap sidenav is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.

By virtue of its clarity and simplicity it remarkably increases User Experience. It allows you to navigate through small applications as well as vast portals swiftly. Multiple link embedding functionality enables you to implement more advanced content categorisation, which is almost essential within bigger projects.

Thanks to MDB you can easily implement SideNav in your own projects, by using one of various, alluring Side Menus.

Navigation on the left is a live demo of SideNav.


How it looks on a mobile device:



SideNav examples

Click on the images below to see live preview



Basic usage

Basic example:

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { Fa, SideNavItem, SideNavCat, SideNavNav, SideNav, SideNavLink, Container, Row } from 'mdbreact';

class SideNavPage extends React.Component {
  constructor(props) {
    super(props);
    this.state ={
      isLeftOpen: false,
      isRightOpen: false
    };
  }

// Slide out buttons event handlers
  handleToggleClickA = () => {
    this.setState({
      isLeftOpen: !this.state.isLeftOpen
    })
  }
  handleToggleClickB = () => {
    this.setState({
      isRightOpen: !this.state.isRightOpen
    })
  }

  render() {
    // Because the toggling buttons are nearly identical, we create a function to render them:
    const createButton = (onClick, side) => {
      return <div style={{width: "50%", textAlign: "center"}}>
              <a href="#!" onClick={onClick} key={'toggleThe'+side+'SideNav'}><Fa icon="bars" size="5x"></Fa></a>
              </div>
    }

    return (
      <Router>
        <Container>

          {/* the buttons toggling visibility of SideNavs: */}
          <Row style={{height: "80vh", alignItems: "center"}} >
              {createButton(this.handleToggleClickA, "Left")}
              {createButton(this.handleToggleClickB, "Right")}
          </Row>

          {/* the left SideNav: */}
          <SideNav logo="https://mdbootstrap.com/img/logo/mdb-transparent.png" hidden triggerOpening={this.state.isLeftOpen} breakWidth={1300} className="deep-purple darken-4">
            <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 id="submit-blog-cat" name="Submit blog" icon="chevron-right">
                  <SideNavLink>Submit listing</SideNavLink>
                  <SideNavLink>Registration form</SideNavLink>
                </SideNavCat>
                <SideNavCat id="instruction-cat" name="Instruction" icon="hand-pointer-o" href="#">
                  <SideNavLink>For bloggers</SideNavLink>
                  <SideNavLink>For authors</SideNavLink>
                </SideNavCat>
                <SideNavCat id="about-cat" name="About" icon="eye">
                  <SideNavLink>Instruction</SideNavLink>
                  <SideNavLink>Monthly meetings</SideNavLink>
                </SideNavCat>
                <SideNavCat id="contact-me-cat" name="Contact me" icon="envelope-o">
                  <SideNavLink>FAQ</SideNavLink>
                  <SideNavLink>Write a message</SideNavLink>
                </SideNavCat>
            </SideNavNav>
          </SideNav>

          {/* the right SideNav: */}
          <SideNav logo="https://mdbootstrap.com/img/logo/mdb-transparent.png" hidden triggerOpening={this.state.isRightOpen} className="side-nav-light" right breakWidth={1300}>
            <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 id="submit-blog-cat" name="Submit blog" icon="chevron-right" >
                  <SideNavLink className="active">Submit listing</SideNavLink>
                  <SideNavLink>Registration form</SideNavLink>
                </SideNavCat>
                <SideNavCat id="instruction-cat" name="Instruction" icon="hand-pointer-o">
                  <SideNavLink>For bloggers</SideNavLink>
                  <SideNavLink>For authors</SideNavLink>
                </SideNavCat>
                <SideNavCat id="about-cat" name="About" icon="eye">
                  <SideNavLink>Instruction</SideNavLink>
                  <SideNavLink>Monthly meetings</SideNavLink>
                </SideNavCat>
                <SideNavCat id="contact-me-cat" name="Contact me" icon="envelope-o">
                  <SideNavLink>FAQ</SideNavLink>
                  <SideNavLink>Write a message</SideNavLink>
                </SideNavCat>
            </SideNavNav>
          </SideNav>

        </Container>
      </Router>
    );
  }
}

export default SideNavPage;