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.

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.

React laag

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/

View on GitHub

3.React Inheritable Context Menu

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

React Inheritable Context Menu

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

View on GitHub

4.React Data Menu

Hints-based aligning with custom renderers and factories.

Never clipped by other components or screen edges.

Video

View on GitHub

5.React Simple Tree Menu

Inspired by Downshift, a simple, data-driven, light-weight React Tree Menu component that:

React Simple Tree Menu

  • 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.

React Aria Menu Button

Live Demo: https://davidtheclark.github.io/react-aria-menubutton/demo/

View on GitHub

7.Cheeseburger Menu

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

Demo
https://codesandbox.io/s/qxL744Qx2

View on GitHub

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.

React Menu List

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.

View on GitHub

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 :)
React horizontal scrolling menu

Demo on Codesandbox

View on GitHub

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.

React Bootstrap Dropdown Menu

View on GitHub

11.React Infinity Menu

A react component that displays an unlimited deep menu
React Infinity Menu

**Live Demo: ** http://socialtables.github.io/react-infinity-menu/

View on GitHub

12.React Contexify

Add a context menu to your react app with ease. A declarative context menu for React !

React Contexify

View on GitHub

13.React Motion Drawer

Navigation drawer built with the awesome react-motion by @chenglou and react-hammerjs by @JedWatson

React Motion Drawer

View on GitHub

14.React Push Menu

react multi level push menu

React Push Menu

View on GitHub

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
React Metis Menu

Live Demo https://alpertuna.github.io/react-metismenu/

View on GitHub

16.Off-canvas menus for React

Off-canvas menus for React
Off-canvas menus for React

Live Demo http://vutran.github.io/react-offcanvas/

View on GitHub

17.React Sidebar 2.3

React Sidebar is a sidebar component for React 0.14+. It offers the following features:

React Sidebar 2.3

  • 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

View on GitHub

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.

React Burger Menu

Live Demo http://negomi.github.io/react-burger-menu/

View on GitHub

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.

React Native Dropdown Menu

View on GitHub

#reactjs #javascript

Best 19 React Menu Component Code Snippet
205.40 GEEK