Skip to content

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

Notifications You must be signed in to change notification settings

stephanieinez/react-responsive-navbar

Repository files navigation

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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published