A React.js menu that pulls out and scales your app down
Branch: master
Clone or download
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.
build
config
public
scripts
src
.gitignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json
react-atmosphere.gif
yarn.lock

README.md

React Atmosphere Menu

Build Status Dependencies Dev Dependencies

npm download

Demo

http://lightninglu10.reactatmosphere.hellodeploy.com/

Alt Text

Install the package

Use NPM or Yarn

yarn add react-atmosphere-menu
npm install --save react-atmosphere-menu

Usage

1 . Require react-atmosphere-menu after installation

import AtmosphereMenu from 'react-atmosphere-menu'

2 . Wrap react-atmosphere-menu around your app

<AtmosphereMenu>
  <YOUR APP />
</AtmosphereMenu

3 . Customize options

var nav = [
  {id: 'home', label: 'Home', path: '/'},
  {id: 'about', label: 'About', path: '/about'},
  {id: 'discover', label: 'Discover', path: '/discover'},
]
<AtmosphereMenu
  active={this.state.atmosphereActive}
  nav={nav}
  reactRouter={true}
  tagLine={"Made by"}
  companyName={"Q5"}
  closeMenu={() => this.setState({atmosphereActive: false})}>
  <YOUR APP />
</AtmosphereMenu

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.
tagLine String Below the navigation, there will be an area for extra text. The tagline goes above the company text.
companyName String Below the navigation, there will be an area for extra text. Here you can display your name or company or group.
logoComponent Component Displayed in line with the companyName, add a component for a logo like so: <img src={LOGO} />.
closeMenu Function The function that closes your atmosphere menu. Should set the variable for the active prop to false.
backgroundImage Image / String An image you want to display in the background on the active Menu or a color. It can be a link to an image online, a file, or #eee.

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.atmospherejs.com