Nothing crazy, nothing flashy, just a simple, flexible & completely customisable responsive navigation bar component.
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 1 commit ahead of stephanieinez:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.babelrc
.eslintrc
.gitignore
.npmignore
README.md
package-lock.json
package.json
rollup.config.js
yarn.lock

README.md

react-responsive-navbar

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

NPM JavaScript Style Guide

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