Collection of free React.js menu: off canvas, circle, context and other. Update of March 2018 collection. 19 new items.

Related Articles

  1. CSS Menus
  2. Bootstrap Menus
  3. jQuery Menus
  4. JavaScript Menus

Author

  • Sonny R. Recio

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Animated Sidebar Menu

Animated sidebar menu with React.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: react-dom.js

Author

  • hewhodevs

Made with

  • HTML / CSS / JS (Babel)

About a code

React Accordion Menu Component

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: react-dom.js

Author

  • Codrops

Made with

  • HTML / CSS / JS

About a code

Rapid Image Hover Menu Effects

A set of hover effects on menu items with images.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mikael Ainalem

Made with

  • HTML / CSS / JS (Babel)

About a code

Liquid Overlay

Morphing menu overlay.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: react-dom.js, react-use-gesture.js

Author

  • Cory L

Made with

  • HTML / CSS (SCSS) / JS (TypeScript)

About a code

Fancy Animated Context Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, react-dom.js

Author

  • Luca Campli

Made with

  • HTML / CSS / JS

About a code

React Use Context Menu

A React hook for easily creating custom Context Menus! The hooks take care of the logic and creating the a11y attributes, you take care of the UI!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Allan Pooley

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Simple Full Page Navigation

A simple full-page navigation built with React.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • pjkarlik

Made with

  • HTML / CSS (Less) / JS (Babel)

About a code

Full Page Quad Navigation

When navigation is a part of the page and experience, click one of the headers to dive into and out of one of the four page sections. Using React16 and mostly state to trigger CSS changes in a basic CSS Flexbox Grid.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: react-dom.js

Author

  • Kishore

Made with

  • HTML / CSS / JS

About a code

RCTX Contextmenu

Context menu plugin for React.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Akram Khalid

Made with

  • HTML / CSS / JS

About a code

React Hamburger Menu

A really fancy menu built with React.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: react-router.js, gsap.js

Author

  • Codebrahma

Made with

  • HTML / CSS / JS

About a code

React Flexible Sliding Menu

A React library which provides Flexible Sliding Menu with an easy to use API and a bunch of other awesome features. Also, you get to choose which animation you want for the sliding menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: -

Author

  • Marco Streng

Made with

  • HTML / CSS / JS

About a code

Styled Off Canvas

Styled Off Canvas is a customizable off-canvas menu built with React and styled-components.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Maks Akymenko

Made with

  • HTML / CSS / JS (Babel)

About a code

Burger Menu with React

Burger menu with React hooks and styled-components.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: react-dom.js, styled-components.js

Author

  • brigitamaria

Made with

  • HTML / CSS (Sass) / JS (Babel)

About a code

Jump Using Context Menu

Jump using context menu with React.js

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: react-dom.js

Author

  • brigitamaria

Made with

  • HTML / CSS (Sass) / JS (Babel)

About a code

Share Selected Text to Twitter via Context Menu

This example works for desktop browser. Select text to show menu, and click the tweet icon on menu to tweet selected text.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: react-dom.js, feather.js

Author

  • Yusinto Ngadiman

Made with

  • HTML / CSS / JS

About a code

React Site Nav

A beautiful site navigation bar to be proud of.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Alex Holachek

Made with

  • HTML / CSS / JS

About a code

React Stripe Menu

A stripe-style animated navbar menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: react-flip-toolkit.js

Author

  • Alexander Buzin

Made with

  • HTML / CSS / JS

About a code

React Rectangle Popup Menu

React rectangle popup menu library.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: React Native Circle Menu

React Native Circle Menu

Ramotion |

github page

CircleMenu is a simple, elegant UI menu with a circular layout and material design animations.

Demo image: React Native Bubble Menu

React Native Bubble Menu

Dante Cervantes |

github page

A Bubble menu effect for your react native application, work very well with react-native-verctor-icons.

Demo image: React Native Circular Menu

React Native Circular Menu

Dante Cervantes |

github page

A ripple menu effect for your React native application.

Author

  • Kye Hohenberger

Made with

  • HTML / CSS / JS

About a code

React Motion with Glamorous & Glamor

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: react-dom.js, react-motion.js

Demo image: React Native Off Canvas Menu

React Native Off Canvas Menu

Provash Shoumma |

github page

Beautifully crafted off canvas menu components for react native applications.

Demo image: React Contexify

React Contexify

Fadi Khadra |

github page demo page

Add a context menu to your React app with ease.

Demo image: React Native Popup Menu

React Native Popup Menu

instea |

github page

Extensible popup menu component for React Native for Android, iOS.

Demo image: React Metismenu

React Metismenu

H.Alper Tuna |

github page demo page

A ready / simple to use, highly customizable, updateable, ajax supported, animated and material designed menu component for React.

Demo image: Radial Menu

Radial Menu

Bogdan Silivestru |

github page

React native radial menu.

Demo image: React Path Menu

React Path Menu

Nash Vail |

github page demo page

Path fly out menu recreated using React Motion.

Demo image: React Motion Menu

React Motion Menu

bokuweb |

github page

A spring animation menu component for React.

Demo image: React Menu Aim

React Menu Aim

Sen Yang |

github page

A React mixin version of Amazon's jQuery-menu-aim plugin.

Demo image: React Contextmenu

React Context Menu

Vivek Kumar Bansal |

github page demo page

Context menu implemented in React.

Demo image: React Burger Menu

React Burger Menu

Made by Imogen Wentworth |

github page demo page

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

Demo image: Customizable Side Menu For React-Native

Customizable Side Menu For React Native

React Native Community |

github page

Side menu component for React Native.

Demo image: React Aria Menubutton

React Aria Menubutton

David Clark |

github page demo page

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.

Demo image: React Tree Menu Component

React Tree Menu Component

Mandarin Drummond |

github page demo page

A stateless tree menu component for React.

Demo image: React Menu

React Menu

react-component |

github page

React menu component.