0.5.1 • Published 6 years ago

react-slide-menu v0.5.1

Weekly downloads
47
License
MIT
Repository
github
Last release
6 years ago

React Slide Menu

Build Status Dependencies Dev Dependencies

npm download

Demo

http://lightninglu10.react-slide-menu.hellodeploy.com/

Alt Text

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

OptionTypeDescription
activeBooleantrue will show the menu and false will hide the menu. (Required)
navArrayAn array of objects that describe the navigation menu. Each object needs to have keys id, label, and path. (Required)
reactRouterBooleantrue if you use React Router in your project false if you don't.
extraComponentComponentDisplayed after the Nav you can add anything you want, add a component for a logo or something else like so: <img src={LOGO} />.
closeMenuFunctionThe function that closes your atmosphere menu. Should set the variable for the active prop to false.

Extra Options / Styling options

OptionTypeDescription
menuClassNameStringExtra class to style the AtmosphereMenu component. Default: menu: { position: 'relative', overflow: 'hidden', },
appClassNameStringExtra class to style your app when the menu is active.
companyClassNameStringExtra class to style the companyName text.
navItemClassNameStringExtra class to style each Navigation item. Default: navItem: { marginBottom: '25px', opacity: '.7', ':hover': { opacity: '1',}},
navLinkStyleStringExtra 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', }},
linkClassNameStringExtra class to style the <a> or Link element of each Navigation item. Has the same style default as above navLinkStyle.
navClassNameStringExtra class to style the whole Nav component.

Inspired by

www.youtube.com and www.typeform.com

0.5.1

6 years ago

0.5.0

6 years ago

0.4.3

6 years ago

0.4.2

6 years ago

0.4.1

6 years ago

0.4.0

6 years ago

0.3.2

6 years ago

0.3.1

6 years ago

0.3.0

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.1

6 years ago