Rate this docs

React Bootstrap Sidenav MDB Pro component

React Sidenav - Bootstrap 4 & Material Design

React 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


      import React from 'react';
      import { MDBIcon, MDBSideNavCat, MDBSideNavNav, MDBSideNav, MDBSideNavLink, MDBContainer, MDBRow, MDBBtn } from 'mdbreact';

      class SideNavPage extends React.Component {
        state = {
          isOpen: false
        }

        handleToggle = () => {
          this.setState({
            isOpen: !this.state.isOpen
          });
        };

        render() {
          const { isOpen } = this.state;
          return (
            <MDBContainer>
              <MDBRow>
                <MDBBtn onClick={this.handleToggle}><MDBIcon icon="bars" size="5x" /></MDBBtn>
              </MDBRow>
              <MDBSideNav
                logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
                hidden
                triggerOpening={isOpen}
                breakWidth={1300}
                className="deep-purple darken-4"
              >
                <li>
                  <ul className="social">
                    <li>
                      <a href="#!">
                        <MDBIcon icon="facebook" />
                      </a>
                    </li>
                    <li>
                      <a href="#!">
                        <MDBIcon icon="pinterest" />
                      </a>
                    </li>
                    <li>
                      <a href="#!">
                        <MDBIcon icon="google-plus" />
                      </a>
                    </li>
                    <li>
                      <a href="#!">
                        <MDBIcon icon="twitter" />
                      </a>
                    </li>
                  </ul>
                </li>
                <MDBSideNavNav>
                  <MDBSideNavCat
                    name="Submit blog"
                    id="submit-blog"
                    icon="chevron-right"
                  >
                    <MDBSideNavLink>Submit listing</MDBSideNavLink>
                    <MDBSideNavLink>Registration form</MDBSideNavLink>
                  </MDBSideNavCat>
                  <MDBSideNavCat
                    name="Instruction"
                    id="instruction"
                    icon="hand-pointer-o"
                    href="#"
                  >
                    <MDBSideNavLink>For bloggers</MDBSideNavLink>
                    <MDBSideNavLink>For authors</MDBSideNavLink>
                  </MDBSideNavCat>
                  <MDBSideNavCat name="About" id="about" icon="eye">
                    <MDBSideNavLink>Instruction</MDBSideNavLink>
                    <MDBSideNavLink>Monthly meetings</MDBSideNavLink>
                  </MDBSideNavCat>
                  <MDBSideNavCat name="Contact me" id="contact-me" icon="envelope-o">
                    <MDBSideNavLink>FAQ</MDBSideNavLink>
                    <MDBSideNavLink>Write a message</MDBSideNavLink>
                  </MDBSideNavCat>
                </MDBSideNavNav>
              </MDBSideNav>
            </MDBContainer>
          );
        }
      }

      export default SideNavPage;
    

React Bootstrap SideNav - API

In this section you will find advanced information about the SideNav component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.


Imports

In order to use SideNav component make sure you have imported proper module first.


      import React from 'react';
      import { MDBSideNav, MDBSideNavNav, MDBSideNavCat, MDBSideNavLink } from 'mdbreact';
    

API Reference: SideNav Properties

The table below shows the configuration options of the MDBSideNav component.

Name Type Default Description Example
bg String Sets image from provided url as SideNav's background <MDBSideNav bg="your/image/url" />
breakWidth Number 1400 The screen width under which the SideNav will be hidden by default <MDBSideNav breakWidth={900} />
className String Sets custom classes <MDBSideNav className="customClass" />
hidden Boolean false SideNav is fixed to the left screen edge by default, use hidden prop to hide component <MDBSideNav hidden />
href String # This url will be attached to SideNav logo <MDBSideNav href="https://someUrl.com" />
logo String Url to your logo <MDBSideNav logo="logo/url" />
mask String Adds mask on the SideNav background image, use combined with bg and skins, accepts ['slight', 'light', 'strong'] <MDBSideNav mask="strong" />
right Boolean false Fixes SideNav to the right side of the screen <MDBSideNav right />
triggerOpening Boolean SideNav toggles accordingly to this property (openes/closes on change) <MDBSideNav triggerOpening={this.state.toggleSideNav} />
tag String div Changes default SideNav tag <MDBSideNav tag="div" />

API Reference: SideNav Methods

Name Parameters Description Example
onOverlayClick event Method which is called when SideNav overlay is clicked (SideNav closes <MDBSideNav onOverlayClick={this.sideNavCloseHandler} >

API Reference: SideNavNav Properties

The table below shows the configuration options of the MDBSideNavNav component.

Name Type Default Description Example
className String Sets custom classes <MDBSideNavNav className="customClass" />
tag String ul Changes default SideNavNav tag <MDBSideNavNav tag="ol" />

API Reference: SideNavCat Properties

The table below shows the configuration options of the MDBSideNavCat component.

Name Type Default Description Example
className String Sets custom classes <MDBSideNavCat className="customClass" />
className String Sets custom classes <MDBSideNavCat className="customClass" />
disabled Boolean false Disables element from being clicked <MDBSideNavCat disabled />
icon String Sets icon before inner text <MDBSideNavCat icon="envelope" />
id String Sets elemnt's id <MDBSideNavCat id="catOne" />
name String Sets inner text <MDBSideNavCat name="Example name" />
tag String li Changes default tag <MDBSideNavCat tag="li" />