react-responsive-navbar

Nothing crazy, nothing flashy, just a simple, flexible & completely customisable responsive navigation bar component. Check out this demo.

Install

npm install --save react-responsive-navbar

Usage

import React, { Component } from 'react';

import ResponsiveMenu from 'react-responsive-navbar';

class Example extends Component {
  render() {
    return (
      <ResponsiveMenu
        menuOpenButton={<div />}
        menuCloseButton={<div />}
        changeMenuOn="500px"
        largeMenuClassName="large-menu-classname"
        smallMenuClassName="small-menu-classname"
        menu={
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
          </ul>
        }
      />
    );
  }
}

Props

• menuOpenButton & menuCloseButton: the icons for small screens. I use react-icons in the example however you are free to use any div that you please.
• changeMenuOn: specify the page width as a string in px that you would like to switch between the small and large menu.
• menu: takes in any div to create your menu content.
• You can also specify individual stylings for each of the large or small menus by adding a className to largeMenuClassName or smallMenuClassName

| name | type | required | | ------------------ | --------------- | -------- | | menuOpenButton | react component | yes | | menuCloseButton | react component | yes | | changeMenuOn | string | yes | | menu | react component | yes | | largeMenuClassName | string | no | | smallMenuClassName | string | no |

License

MIT © Stephanie Tassone