A simple sliding side menu component for React

Overview

Cheeseburger Menu

A simple sliding side menu component for React.

This component provides the sliding menu only, not the hamburger button. For your button I'd suggest react-hamburger-menu.

Demo

https://codesandbox.io/s/qxL744Qx2

Usage

Cheeseburger Menu has two required props, isOpen and closeCallback, plus a number of optional props described below. Your content should go inside as child components.

closeCallback will be called when the user taps out of the menu, or when they slide it closed.

Example:

  • Menu item 1
  • Menu item 2
">
import CheeseburgerMenu from 'cheeseburger-menu'

...


  
  
   
  • Menu item 1
  • Menu item 2

Optional props

name type default description
right bool false If true, menu will slide in from the right (default is left)
transitionTime number 0.3 Slide in/out duration in seconds
topOffset number or string 0 Distance between the top of the viewport and the top of the menu (if you want the menu to appear beneath your header). Can be a number (of pixels) or any valid CSS length, e.g. '2em'.
bottomOffset number or string 0 Same as topOffset but for the bottom
width number 300 Menu width in pixels
backgroundColor string 'white' Background color for the menu
noShadow bool false If true, there will be no shadow at the edge of the menu
skewY number 0 Vertical skew in degrees
className, overlayClassName, outerClassName, innerClassName, shadowClassName string undefined Props for adding classes to the various elements

Additional custom styling can be done with CSS.

License

ISC License

Copyright (c) 2017-18, Eddie McLean

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

You might also like...
🍪 A stylized command menu for React.
🍪 A stylized command menu for React.

🚧 Superkey is under development and is not ready for production. If you have any bugs or problems please create an issue. 🚧 Website (working 😊 ) •

📱 A performant, easy to use hold to open context menu for React Native powered by Reanimated 🚀
📱 A performant, easy to use hold to open context menu for React Native powered by Reanimated 🚀

React Native Hold Menu A performant, easy to use hold to open context menu for React Native powered by Reanimated. 🔥 This package is experimental and

Smart data-driven menu rendered in an overlay
Smart data-driven menu rendered in an overlay

React Data Menu Smart data-driven menu rendered in an overlay. Hints-based aligning with custom renderers and factories. Never clipped by other compon

Simple lightweight (2kb) animated slider component.

react-slide-out Simple lightweight (2kb) animated slider component. Usability import Slider from 'react-slide-out'; and include css file import 'reac

A simple Hook for creating fully accessible dropdown menus in React

This Hook handles all the accessibility logic when building a dropdown menu, dropdown button, etc., and leaves the design completely up to you. It also handles the logic for closing the menu when you click outside of it.

:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations

react-burger-menu An off-canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations. Using R

:art: Off-canvas menus for React.

React Off-Canvas Off-canvas menus for React. Installation $ npm install --save react-offcanvas Usage Basic Usage OffCanvas width={300} transition

A react lib for building circular menus in a very easy and handy way.
A react lib for building circular menus in a very easy and handy way.

react-planet A react lib for building circular menus in a very easy and handy way. Live-Demo: STORYBOOK Read the full story @ Medium or innFactory-Blo

React dismissable context and hook with layers (nesting) support
React dismissable context and hook with layers (nesting) support

Context and hook to add support for nested, auto-dismissable layers. State can be globally controlled through context. Best used with react-popper.

Comments
  • Pls upd react-easy-swipe

    Pls upd react-easy-swipe

    Please update the package "react-easy-swipe" to new version. becouse your version throw a warning:

    lowPriorityWarning.js?4545:40 Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs

    opened by maxttor 1
  • Getting a warning in VSCode: Could not find a declaration file ...

    Getting a warning in VSCode: Could not find a declaration file ...

    Could not find a declaration file for module 'cheeseburger-menu'. 'c:/[PATH-TO-PROJECT/react-nav/node_modules/cheeseburger-menu/index.js' implicitly has an 'any' type.

    Try npm install @types/cheeseburger-menu if it exists or add a new declaration (.d.ts) file containing `declare module 'cheeseburger-menu';

    I tried npm install @types/cheeseburger-menu and it wouldn't install.

    Where would I create the .d.ts file?

    Note: everything works as expected - is it safe to ignore?

    opened by chrisnajman 0
  • Warning when the width property is not a string

    Warning when the width property is not a string

    Setting the width property to "20rem" seems to work fine but produces a console warning:

    Warning: Failed prop type: Invalid prop width of type string supplied to CheeseburgerMenu, expected number.

    I think the expected prop type should be string, right?

    opened by mnieber 1
Owner
Eddie McLean
Eddie McLean
React component for building accessible menu, dropdown, submenu, context menu and more.

React-Menu An accessible and keyboard-friendly React menu library. Live examples and docs Features React menu components for easy and fast web develop

Zheng Song 837 Jan 9, 2023
Simple Context menu component for react showing all parent's node menus in theirs contexts.

Simple Context menu component for react showing all inherited parents menu with SSR compatibility.

Nathan Braun 6 Nov 13, 2022
A simple, data-driven, light-weight React Tree Menu component

React Simple Tree Menu Inspired by Downshift, a simple, data-driven, light-weight React Tree Menu component that: does not depend on any UI framework

Huang-Ming Chang 120 Dec 1, 2022
A react component that displays an unlimited deep menu

react-infinity-menu An unlimited deep side menu Live Demo Demo Installation npm install react-infinity-menu How to use import InfinityMenu from "react

Social Tables 58 Dec 5, 2022
Animated hamburger menu icons for React (1.5 KB) 🍔

‌ ‌ Animated hamburger menu icons for React Hamburger menu icons for React, with CSS-driven transitions. Created to be as elegant and performant as po

Luuk de Vlieger 709 Dec 31, 2022
React Dropdown Menu

React Dropdown Menu

Mikkel Laursen 142 Dec 3, 2022
Hamburger Menu React JS Using Third Party Package ReactJS - Popup

In this project, let's build a Hamburger Menu app by applying the concepts we have learned till now. Refer to the image below: Design Files Click to v

null 2 Dec 6, 2021
React dropdown menu components

react-menu-list This project is a set of components for building menus. This project works well for dropdown and autocomplete menus. The menus are cor

Streak 79 Nov 16, 2022
Add a context menu to your react app with ease

Documentation Go here. Installation Using yarn $ yarn add react-contexify Using npm $ npm install --save react-contexify The gist import React from 'r

Fadi Khadra 868 Jan 8, 2023
Radial Menu for FiveM,built with React

BCS Radial Menu This project is to freshen up the options for free radial menu f

BagusCodeStudio 13 Nov 7, 2022