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

npm install --save react-responsive-navbar

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

• 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

MIT © Stephanie Tassone