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

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

Creator

  • Sonny R. Recio

Programming language

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

Information a code

Animated Sidebar Menu

Animated sidebar menu with React.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: react-dom.js

Creator

  • hewhodevs

Programming language

  • HTML / CSS / JS (Babel)

Information a code

React Accordion Menu Component

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: react-dom.js

Creator

  • Codrops

Programming language

  • HTML / CSS / JS

Information a code

Rapid Image Hover Menu Effects

A set of hover effects on menu items with images.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Mikael Ainalem

Programming language

  • HTML / CSS / JS (Babel)

Information a code

Liquid Overlay

Morphing menu overlay.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

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

Creator

  • Cory L

Programming language

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

Information a code

Fancy Animated Context Menu

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

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

Creator

  • Luca Campli

Programming language

  • HTML / CSS / JS

Information 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!

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Allan Pooley

Programming language

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

Information a code

Simple Full Page Navigation

A simple full-page navigation built with React.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • pjkarlik

Programming language

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

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: react-dom.js

Creator

  • Kishore

Programming language

  • HTML / CSS / JS

Information a code

RCTX Contextmenu

Context menu plugin for React.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Akram Khalid

Programming language

  • HTML / CSS / JS

Information a code

React Hamburger Menu

A really fancy menu built with React.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: react-router.js, gsap.js

Creator

  • Codebrahma

Programming language

  • HTML / CSS / JS

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Bootstrap version:

Creator

  • Marco Streng

Programming language

  • HTML / CSS / JS

Information a code

Styled Off Canvas

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Maks Akymenko

Programming language

  • HTML / CSS / JS (Babel)

Information a code

Burger Menu with React

Burger menu with React hooks and styled-components.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

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

Creator

  • brigitamaria

Programming language

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

Information a code

Jump Using Context Menu

Jump using context menu with React.js

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: react-dom.js

Creator

  • brigitamaria

Programming language

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

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: react-dom.js, feather.js

Creator

  • Yusinto Ngadiman

Programming language

  • HTML / CSS / JS

Information a code

React Site Nav

A beautiful site navigation bar to be proud of.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Alex Holachek

Programming language

  • HTML / CSS / JS

Information a code

React Stripe Menu

A stripe-style animated navbar menu.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: react-flip-toolkit.js

Creator

  • Alexander Buzin

Programming language

  • HTML / CSS / JS

Information a code

React Rectangle Popup Menu

React rectangle popup menu library.

Browser Support: 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.

Creator

  • Kye Hohenberger

Programming language

  • HTML / CSS / JS

Information a code

React Motion with Glamorous & Glamor

Browser Support: 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.