Nothing crazy, nothing flashy, just a simple, flexible & completely customisable responsive navigation bar component.
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>
}
/>
);
}
}
react-icons
in the
example however
you are free to use any div
that you please.px
that you would
like to switch between the small and large menu.div
to create your menu content.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 |
MIT © Stephanie Tassone