react-slide-menu

KO | EN

gitlite — search

#hacktoberfest #ai #typescript #llm #go #machine-learning #rust #java #cli #kubernetes #security #pytorch #ios #mcp

react-slide-menu

(★ 8)

A React.js menu that slides your app in & out

react-slide-menu 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Slide Menu

[![Build Status](https://travis-ci.org/UdiliaInc/create-react-library.svg?branch=master)](https://travis-ci.org/UdiliaInc/create-react-library)
[![Dependencies](https://img.shields.io/david/udiliaInc/create-react-library.svg)](https://img.shields.io/david/udiliaInc/create-react-library.svg)
[![Dev Dependencies](https://img.shields.io/david/dev/udiliaInc/create-react-library.svg)](https://img.shields.io/david/dev/udiliaInc/create-react-library.svg)

[![npm download][download-image]][download-url]

[download-image]: https://img.shields.io/npm/dm/react-slide-menu.svg?style=flat-square
[download-url]: https://www.npmjs.com/package/react-slide-menu

## Demo

![Slide menu demo](https://github.com/quantfive/react-slide-menu/blob/master/slide.gif?raw=true)

## Install the package

Use NPM or Yarn

```sh
yarn add react-slide-menu
```

```sh
npm install --save react-slide-menu
```

## Usage

1 . Require react-atmosphere-menu after installation

```js
import SlideMenu from 'react-slide-menu'
```

2 . Wrap react-slide-menu around your app

```js
<SlideMenu>
  <YOUR APP />
</SlideMenu>
```

3 . Customize options

```js
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](www.youtube.com)

and

[www.typeform.com](www.typeform.com)

react-slide-menu

react-slide-menu 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-slide-menu

react-slide-menu 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README