React Slide Menu

Demo

Install the package

Use NPM or Yarn

yarn add react-slide-menu

npm install --save react-slide-menu

Usage

1 . Require react-atmosphere-menu after installation

import SlideMenu from 'react-slide-menu'

2 . Wrap react-slide-menu around your app

<SlideMenu>
  <YOUR APP />
</SlideMenu>

3 . Customize options

var nav = [
  {id: 'home', label: 'Home', path: '/'},
  {id: 'about', label: 'About', path: '/about'},
  {id: 'discover', label: 'Discover', path: '/discover'},
]

<SlideMenu
  active={this.state.slideMenuActive}
  nav={nav}
  reactRouter={true}
  closeMenu={() => this.setState({slideMenuActive: false})}>
  <YOUR_APP />
</SlideMenu>

Main Options

Option	Type	Description
active	Boolean	true will show the menu and false will hide the menu. (Required)
nav	Array	An array of objects that describe the navigation menu. Each object needs to have keys id, label, and path. (Required)
reactRouter	Boolean	true if you use React Router in your project false if you don't.
extraComponentTop	Component	Displayed before the Nav you can add anything you want, add a component for a logo or something else like so: <img src={LOGO} />.
extraComponentBottom	Component	Displayed after the Nav you can add anything you want, add a component for a logo or something else like so: <img src={LOGO} />.
closeMenu	Function	The function that closes your atmosphere menu. Should set the variable for the active prop to false.

Extra Options / Styling options

Option	Type	Description
menuClassName	String	Extra class to style the AtmosphereMenu component. Default: menu: { position: 'relative', overflow: 'hidden', },
appClassName	String	Extra class to style your app when the menu is active.
companyClassName	String	Extra class to style the companyName text.
navItemClassName	String	Extra class to style each Navigation item. Default: navItem: { marginBottom: '25px', opacity: '.7', ':hover': { opacity: '1',}},
navLinkStyle	String	Extra prop to style the <a> or Link element of each Navigation Item. Default: linkStyle: { textDecoration: 'none', color: '#fff', fontWeight: '300', '@media only screen and (min-width: 768px)': { fontSize: '2em', }, '@media only screen and (min-width: 1440px)': { fontSize: '2.5em', }},
linkClassName	String	Extra class to style the <a> or Link element of each Navigation item. Has the same style default as above navLinkStyle.
navClassName	String	Extra class to style the whole Nav component.

Inspired by

www.youtube.com

and

www.typeform.com