hamburger-react alternatives and similar libraries

Based on the "Menu" category.
Alternatively, view hamburger-react alternatives based on common mentions on social networks and blogs.

react-burger-menu

8.5 0.0 hamburger-react VS react-burger-menu

:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
react-contextmenu

7.2 4.0 hamburger-react VS react-contextmenu

Context Menu implemented in React.

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App

With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

Promo surveyjs.io

react-sidebar

7.1 0.0 hamburger-react VS react-sidebar

A sidebar component for React.
rc-menu

5.9 7.6 hamburger-react VS rc-menu

React Menu
React horizontal scrolling menu

5.3 8.7 hamburger-react VS React horizontal scrolling menu

Horizontal scrolling menu component for React.
react-motion-menu

4.0 0.0 hamburger-react VS react-motion-menu

Motion menu component powered by React Motion.
react-metismenu

3.4 0.0 hamburger-react VS react-metismenu

A ready-to-use menu component for React.
react-tree-menu

3.2 0.0 hamburger-react VS react-tree-menu

A stateless tree menu component for React.
react-planet

2.8 0.0 hamburger-react VS react-planet

A react lib for building circular menus in a very easy and handy way.
react-offcanvas

1.8 0.0 hamburger-react VS react-offcanvas

:art: Off-canvas menus for React.

Do you think we are missing an alternative of hamburger-react or a related project?

Add another 'Menu' Library

Popular Comparisons

README

‌ ‌ Animated hamburger menu icons for React Hamburger menu icons for React, with CSS-driven transitions. Created to be as elegant and performant as possible. This means no JavaScript animations, no transitions on non-cheap properties and a small size.

Installation

npm install hamburger-react

Size

When using one hamburger, ~1.5 KB will be added to your bundle (min + gzip).

Usage

Visit the website for full documentation, API and examples. A basic implementation looks as follows:

import Hamburger from 'hamburger-react'

const [isOpen, setOpen] = useState(false)

<Hamburger toggled={isOpen} toggle={setOpen} />

Or without providing your own state:

<Hamburger onToggle={toggled => ...} />

Yet another hamburger library?

Yes. Since the creation of these burgers in 2015 a lot of similar ones have appeared, with one or more of the following downsides:

Animations that don't feel natural
Transitions on expensive properties (jerky animations)
No React support
Size (additional dependencies besides React or no tree shaking)
Not customizable, or too customizable (no sensible defaults)
Doing too much

Accessibility

It is recommended to have a tap/click area of at least 48x48 pixels. Therefore, padding will be added around the icon to create a surface of exactly this size.

Keyboard interaction is provided with the enter key, and the icon element has the recommended accessibility attributes (such as role). You can use the label property to supply an ARIA label for the icon.