Collection of free React.js menu: off canvas, circle, context and other. Update of March 2018 collection. 19 new items.
Related Articles
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
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.