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