Animated hamburger menu icons for React (1.5 KB) ๐Ÿ”

Last update: May 11, 2022

โ€Œ

Preview

โ€Œ

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.

Support

The icons are hooks-based, and will work with React 16.8.0 ('the one with hooks') or higher.

GitHub

https://github.com/luukdv/hamburger-react
Comments
  • 1. Styling

    I am not sure if its for all but most of the components doesn't have properties for styling <Sling onToggle={props.clicked} color="white" size={18} hideOutline={true}/> is there a way to fix this cos i have read the documentations

    Reviewed by Senninseyi at 2021-08-20 10:54
  • 2. Hamburger doesn't work properly Safari on mac and on iOS

    So in chrome it works flawlessly but on Safari, it is buggy and when clicked it makes half the items disappear and later whole hamburger is not visible.

    Reviewed by luluhoc at 2021-06-12 10:19
  • 3. Rewrite package using TypeScript

    Companion PR to issue #9

    I will say up front that I'm not sure how best to publish this to npm, but I figured this is a good starting point for it. The build command creates something that looks publishable to me but a second look would not hurt.

    Reviewed by SeinopSys at 2020-03-27 17:08
  • 4. Disable colour transition

    Hi there, I am using a dark mode toggle theme, and everything in my website changes colours straight away except the burger menu, is there any way for me to disable transition on colours?

    Many thanks

    Loving the togglers!

    Reviewed by Nuno111 at 2021-07-14 09:55
  • 5. Check if user provided `toggle` is defined

    Currently this is done using a ternary, which is incorrectly using toggleInternal when toggle is set to false. Update to using nullish coallescing to check if toggle is defined rather than falsey.

    Reviewed by SimplyComplexable at 2021-03-04 23:54
  • 6. No imperative way to toggle Hamburger

    Hey there! Saw this package on reddit a few days ago and thought I'd give it a try, I really like the animations.

    I tried this out in my project and ran into an issue and wondering if you could help. I have it working to open and close my menu just fine, but inside my menu I want to be able to click on a navigation item and have that close the menu after I click on it. I currently can't fire off a function to affect the Hamburger state, essentially.

    What I am proposing is maybe a new property (named toggled perhaps?) that accepts a boolean value, so that I can control the toggling state of the Hamburger from clicking on something that isn't the Hamburger.

    Example:

    // hook for showing/hiding menu
    const [menuIsToggled, setMenuIsToggled] = useState(false);
    
    // elsewhere in my code, a function that closes the menu after a navigation item is clicked
    const closeMenuAndNavigate = () => {
      // navigate to new page, then close the menu
      navigate('/');
      setMenuIsToggled(false); // close the menu
    }
    
    // Later on, I can control the Hamburger's internal state with a `toggled` prop,
    // and still use `onToggle` to trigger the change
    <Hamburger toggled={menuIsToggled} onToggle={() => setMenuIsToggled(!menuIsToggled)} />
    

    Look forward to hearing back. Thanks!

    Reviewed by tonymamo at 2020-03-25 01:13
  • 7. Add option for hover styles/animation

    I would love to add subtle hover animation, similar like this one from Pangram Pangram: screenshot-2022-05-04-The Pangram Pangramยฎ Font Starter Pack - Edition 4 0 โ€“ Pangram Pangram Foundry -HvxD78au

    I've tried manually overriding the CSS like this:

    .hamburger-react:hover div:first-of-type > div {
      top: 16px !important;
    }
    
    .hamburger-react:hover div:last-of-type > div {
      top: 30px !important;
    }
    

    I could live with the fixed values and those !importants if it worked well, but this approach results in broken styling when the menu is open and still hovered on: screenshot-2022-05-04-Critical Perspectives on Public Art   Innovation โ€” Ilja Panicฬ -dJaHeNE8

    It's probably possible to find a way to hack around it to make it work, but I was wondering if you are considering to add some styling options for hover state?

    Thank you for such a straight-forward and clean menu implementation. I'm happy with it with or without hover ๐Ÿ™

    Reviewed by iljapanic at 2022-05-04 19:51
  • 8. No animation on mobile

    Thanks for the work with this library!

    Unfortunately, it seems the animations don't work on mobile, even in the demo site. There are no transitions, and the menu just go from one form to the other without any animation. You need to try on a real device, not the devtools

    Reviewed by demjm at 2022-02-28 13:06
  • 9. Module parse failed : Unexpected token

    Hello,

    I tried to install your package and there is a compilation error in the package :

    "./node_modules/hamburger-react/dist-esm/Spin.js Module parse failed: Unexpected token (12:13) You may need an appropriate loader to handle this file type. | onKeyUp: e => e.key === 'Enter' && o.handler(), | role: "button", | style: { ...o.burgerStyles, | transform: ${o.isToggled ?rotate(${180 * (o.isLeft ? -1 : 1)}deg): 'none'} | },"

    The problem seems to be "...o.burgerStyles", when I delete it, the package compile correctly,

    Can you solve my issue please ? Thanks a lot

    Reviewed by Wullver at 2021-08-19 15:57
  • 10. Feature idea: customize timing function

    Hi!

    Love the simplicity and elegancy of your component, thanks for sharing it with the world! I tried to use it on a project of mine, customizing everything I could but it was feeling off, I didn't know why then it hit me. Your component has an opinionated easing function that is very different than what I use on the rest of my website interactions.

    Would you mind adding an option to customize this too?

    Thanks!

    Reviewed by cmdalbem at 2020-08-31 14:44
  • 11. dist-cjs error in eslint

    For some reason my eslint falling with error on file where I import Hamburger. Project is on typescript, and everything is working as should actually, so its eslint-only issue. Not sure what causes it, but it fails on simple eslint --fix <file where you import hamburger>

    eslint

    Reviewed by sandric at 2020-04-23 14:37
:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations

react-burger-menu An off-canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations. Using R

May 7, 2022
React component for building accessible menu, dropdown, submenu, context menu and more.

React-Menu An accessible and keyboard-friendly React menu library. Live examples and docs Features React menu components for easy and fast web develop

May 9, 2022
Left navigation menu. Get data from JSON file and display simple form menu.

Left Navbar Menu Left navigation menu. Get data from JSON file and display simple form menu. User Interface created using React and Typescript. App st

May 24, 2021
React-animated-navbars library for creating animated navigation panels
React-animated-navbars library for creating animated navigation panels

?? A zero dependancy react library for creating animated hamburger menus with CSS transitions.

Apr 16, 2022
React Dropdown Menu

React Dropdown Menu

Nov 26, 2021
Simple Context menu component for react showing all parent's node menus in theirs contexts.
Simple Context menu component for react showing all parent's node menus in theirs contexts.

Simple Context menu component for react showing all inherited parents menu with SSR compatibility.

Dec 15, 2020
A simple, data-driven, light-weight React Tree Menu component

React Simple Tree Menu Inspired by Downshift, a simple, data-driven, light-weight React Tree Menu component that: does not depend on any UI framework

May 3, 2022
A simple sliding side menu component for React

Cheeseburger Menu A simple sliding side menu component for React. This component provides the sliding menu only, not the hamburger button. For your bu

May 12, 2021
React dropdown menu components

react-menu-list This project is a set of components for building menus. This project works well for dropdown and autocomplete menus. The menus are cor

Dec 8, 2021
Add a context menu to your react app with ease
Add a context menu to your react app with ease

Documentation Go here. Installation Using yarn $ yarn add react-contexify Using npm $ npm install --save react-contexify The gist import React from 'r

May 13, 2022
A react component that displays an unlimited deep menu
A react component that displays an unlimited deep menu

react-infinity-menu An unlimited deep side menu Live Demo Demo Installation npm install react-infinity-menu How to use import InfinityMenu from "react

May 9, 2022
Radial Menu for FiveM,built with React
Radial Menu for FiveM,built with React

BCS Radial Menu This project is to freshen up the options for free radial menu f

Apr 13, 2022
Smart data-driven menu rendered in an overlay
Smart data-driven menu rendered in an overlay

React Data Menu Smart data-driven menu rendered in an overlay. Hints-based aligning with custom renderers and factories. Never clipped by other compon

Mar 7, 2022
Simple lightweight (<2kb) animated slider component.

react-slide-out Simple lightweight (<2kb) animated slider component. Usability import Slider from 'react-slide-out'; and include css file import 'reac

Aug 22, 2020
:art: Off-canvas menus for React.

React Off-Canvas Off-canvas menus for React. Installation $ npm install --save react-offcanvas Usage Basic Usage <OffCanvas width={300} transition

Feb 26, 2022
A react lib for building circular menus in a very easy and handy way.
A react lib for building circular menus in a very easy and handy way.

react-planet A react lib for building circular menus in a very easy and handy way. Live-Demo: STORYBOOK Read the full story @ Medium or innFactory-Blo

May 5, 2022
A simple Hook for creating fully accessible dropdown menus in React

This Hook handles all the accessibility logic when building a dropdown menu, dropdown button, etc., and leaves the design completely up to you. It also handles the logic for closing the menu when you click outside of it.

May 2, 2022
React dismissable context and hook with layers (nesting) support
React dismissable context and hook with layers (nesting) support

Context and hook to add support for nested, auto-dismissable layers. State can be globally controlled through context. Best used with react-popper.

Feb 4, 2022
Tiny react library for building tooltips, flyovers, menus and more
Tiny react library for building tooltips, flyovers, menus and more

Postel ?? Postel is a single component that you can easily extend into customized tooltips, dropdowns, flyovers โ€“ any type of UI which would make sens

May 3, 2022