Best 19 React Menu Component Code Snippet
1.Responsive sidebars
Minimal implementation of responsive sidebars.This project is somewhat of a research experiment into the most convenient way of implementing responsive sidebars.
Priorities
- Simple design, easy to understand.
- Responsive design:
- In landscape mode the sidebars should push the main content aside.
- In portrait mode they should cover the main content.
- The sidebar trigger should not move when clicked;
this is annoying to the user. - The sidebar should be ‘ready’ when it slides into view,
and not rearrange its content while opening.
(This is visually distracting, but a very common implementation;
e.g. variable-width sidebars with width: 0 when closed)
Live Demo: https://davidde.github.io/sidebars/
[View on GitHub](https://github.com/davidde/sidebars "View on GitHub")
2.React laag
Primitive to build things like tooltips dropdown menu’s and pop-overs.Basically any kind of layer that can be toggled. Focus on what your layer should look like, and let react-laag take care of where and when to show it.
Features
- Build your own tooltips / dropdown-menu’s / pop-overs / etc…
- Not opinionated regarding styling or animations
- Highly customizable
- Only ~5kb minified and gzipped
- Zero dependencies
- Built with typescript / ships with typescript definitions
- Integrates well with other libraries
- Automatically adjusts your layer’s placement to fit the screen
- Works with nested scroll-containers
- Observes and reacts to changes in dimensions
Live Demo: https://www.react-laag.com/
3.React Inheritable Context Menu
Simple Context menu component for react showing all inherited parents menu with SSR compatibility.
Why another context menu ?
Because none of the existing ones have met my requirements :
- Ability to inherit & include parents context menus
- Possibility to render menu items basing the browser event
- Render menus just in time
- Simple to use
- Simple to animate with css
- Do not break SSR
4.React Data Menu
Hints-based aligning with custom renderers and factories.
Never clipped by other components or screen edges.
Video
5.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
- fully customizable with render props and control props
- allows search
Live Demo: https://iannbing.github.io/react-simple-tree-menu/?path=/story/treemenu--default-usage
View on GitHub
6.React Aria Menu Button
A React component that will help you build accessible menu button
A React component (set of components, really) that will help you build accessible menu buttons by providing keyboard interactions and ARIA attributes aligned with the WAI-ARIA Menu Button Design Pattern.
Live Demo: https://davidtheclark.github.io/react-aria-menubutton/demo/
7.Cheeseburger Menu
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
8.React Menu List
This project is a set of components for building menus with. This project works well for dropdown and autocomplete menus. The menus are correctly keyboard-accessible, and it includes polish like established desktop application menus have such as well-behaved submenus which stay open even if the user briefly moves the mouse over other menu items while moving toward the submenu’s dropdown.
This project differs from other similar projects because it allows arbitrary elements to be in the menu, including allowing menu items to be nested into other elements, and allows custom menu items that take control of the cursor.
This project doesn’t include much CSS styling for the menus. You need to bring your own CSS. This makes this project great for someone trying to match their application’s existing style. It’s recommended that your application create wrapper components around this project’s components that add your application’s CSS.
9.React horizontal scrolling menu
Horizontal scrolling menu component for React
This is horizontal scrolling menu component for React. Menu component has adaptive width, just set width for parent container. Items width will be determinated from css styles. Note: don’t set margin for item wrapper, use padding instead. Can use margin for item element those you pass as props.
For navigation you can use arrows, mouse wheel or just drag items.
Component return items position, selected item and click event from callbacks.
Possible set default position and selected item on initialization.
Add star if you like project :)
10.React Bootstrap Dropdown Menu
A simple dropdown menu for React, with Bootstrap icon trigger.A simple Dropdown Menu for React. Commonly used as a ‘User Settings’ menu on websites where users login.
11.React Infinity Menu
A react component that displays an unlimited deep menu
**Live Demo: ** http://socialtables.github.io/react-infinity-menu/
12.React Contexify
Add a context menu to your react app with ease. A declarative context menu for React !
13.React Motion Drawer
Navigation drawer built with the awesome react-motion by @chenglou and react-hammerjs by @JedWatson
14.React Push Menu
react multi level push menu
15.React Metis Menu
A ready-to-use menu component for React .A ready / simple to use, highly customizable, updateable, ajax supported, animated and material designed menu component for React
Live Demo https://alpertuna.github.io/react-metismenu/
16.Off-canvas menus for React
Off-canvas menus for React
Live Demo http://vutran.github.io/react-offcanvas/
17.React Sidebar 2.3
React Sidebar is a sidebar component for React 0.14+. It offers the following features:
- The sidebar can slide over the main content or dock next to it.
- Touch enabled: swipe to open and close the sidebar like on a native mobile app.
- Easy to combine with media queries to show the sidebar only when there’s enough screen-width (see example).
- Works on both the left and right side.
- Tiny size: <2.5kB gzipped
- MIT license
18.React Burger Menu
An off-canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations.
Using Redux? Check out redux-burger-menu for easy integration of react-burger-menu into your project.
Live Demo http://negomi.github.io/react-burger-menu/
19.React Native Dropdown Menu
A component for react-native ( iOS ). Easy to use. A component for react-native.It is very easy to use.
#reactjs #javascript
