Collection of free React JS menu: off canvas, circle, context and other. Update of December 2020 collection. 10 new items.
Related Articles
Links
About a code
Menu Sorting
A simple sorting menu design with animations.
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
About a code
Animated Menu with React and Gsap
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js

About a code
React Navbar Dropdown Menu Responsive
Links
About a code
react-menu-list
A React menu component with filter features.

About a code
Hamburger Menu in React JS

Links
Made with
- HTML / CSS / JS
About a code
Museum Website UI/UX (Swiper, React)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: swiper.js
Links
About a code
Double Menu UI Animation in & for React Native
It's so simple to use. You just need to pass the data (categories) for both of the columns/double menu.

Links
About a code
react-native-menu/menu
Android PopupMenu and iOS14+ UIMenu components for react-native.
Links
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
Links
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
Links
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: -
Links
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
Links
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
Links
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: -
Links
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: -
Links
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
Links
About a code
React Pro Sidebar
A responsive sidebar template version of the HTML pro side bar with dropdown menu built with React 16.8 and Bootstrap 4.
Links
About a code
React Multilevel Sidebar
react-multilevel-sidebar is a sidebar component for web and responsive mobile layout it gives you nested level menu where you can categorize your items.
Links
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: -
Links
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
Links
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: -
Links
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: -
Links
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
Links
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
Links
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
Links
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: -
Links
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
Links
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: -

CircleMenu is a simple, elegant UI menu with a circular layout and material design animations.
A Bubble menu effect for your react native application, work very well with react-native-verctor-icons
.

A ripple menu effect for your React native application.
Links
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

Beautifully crafted off canvas menu components for react native applications.

Add a context menu to your React app with ease.

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

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

React native radial menu.

Path fly out menu recreated using React Motion.

A spring animation menu component for React.

React dropdown menu.

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

Context menu implemented in React.

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

Side menu component for React Native.

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.

A stateless tree menu component for React.

React menu component.