cyntler / hamburger-react

Animated hamburger menu icons for React.js weighs only 1.5 KB.

‌

‌

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.

hamburger-react's Issues

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

How can I give it custom styling specifically `z-index : 2`?

Icon out of sync with `toggled` parameter

Hi,

Please see here for a description of the issue and a proposed solution.

Thanks!

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!

Close menu when Link to is clicked.

Hi folks,

This is a great library so thank you! I have a question when a user toggles open the menu and clicks a Link to - is that a way to have the menu close again. Here is my code:

I have tried to use:

toggled={isOpen} toggle={setOpen}

On the menu anchor tag and list item tag too. What am I doing wrong here?

Thank you,

Ben.

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

React Error 321 when using hamburger-react

I'm getting this error from Vercel, which seems to come from this package:

Any ideas why this could be?

Styled-components class not attached to element

Good day,

thank you for creating this library, it looks nice!

I would like to show it only on a small screen size while using Styled-components. I therefore tried to instantiate the Hamburger as follows:

const StyledHamburger = styled(Hamburger)`
	@media(min-width: 770px){
		display: none;
	}
`;

However, as the className is not attached to the element, this does not work. See the Styled-components documentation for more information.

Looking for new owner 🍔

I unfortunately don't have the time and/or energy anymore to maintain this library, which means I'm looking for someone who is willing to take over.

It would be amazing if someone is interested to keep giving love to these hamburgers. You'd be making sure this little library (that gets 100K-125K downloads per month) stays alive! Please reach out if that's you or if you know anyone.

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!

Prop for disabling padding

I think it's good that the hamburger defaults to 48x48 pixels, however I would like to be able to add the padding myself or create my own clickable area around/on top of the react burger. This would make styling a lot easier too.

Will this component be available for react native?

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.

Add a custom svg as a burger icon

Default import not working

Just had a really weird bug I want to document. I was using the import as expected:

import Hamburger from "hamburger-react";

and for some reason I was running into this issue, Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. which means that my import wasn't right.

Super weird since the default import is already specified and it works in development, but it fails when I run npm run build

If I change the import to import {Squash as Hamburger} from 'hamburger-react';, it works again.

Error import with typescript

Hi @luukdv,

Thanks for this amazing library!

I have a problem with nextjs and typescript. When I try to import your library, I get an error about module resolution.

My tsconfig.json has "moduleResolution": "node"

Following the error:
Error: Must use import to load ES Module:

Could you add this export?

Thanks so much!
Cheers! 🍻

Spread syntax fails on Edge

Spread operator is not supported on Microsoft Edge and lib fails with following error:

{
  "description": "Expected identifier, string or number",
  "message": "Expected identifier, string or number",
  "number": -2146827260,
  "stack": "SyntaxError: Expected identifier, string or number at ./node_modules/hamburger-react/dist-esm/Tilt.js[...]"
}

Can we change Bg color

Hello,
I have a question can we change backgraound color on by condition use this toggled stated

React 18 Update

React v18 was released.

Pass click event to toggle and onToggled

Hey there, I have a use case to handle the event fired when clicking the underlying dom node that triggers the toggle and onToggled handler. I've created a PR with how this might be implemented.

Let me know what you think! #40

On hover

Hi. Is there a way to trigger the animation on hover and not only on click??

Feature Request: A prop to set width of each lines or different menu style as another component

Basically, i wanted to have my menu in this style:

But the ones i found can either work in only one theme mode or others dont have typescript support(Although having typescript is not much needed but its better that way) and some dont look too good.

Could you add something for this? In the form of line width separately or as a different ham menu style component.
And also a possibility to reverse the menu.

Add option for hover styles/animation

I would love to add subtle hover animation, similar like this one from Pangram Pangram:

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:

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 🙏

Hamburger Menu Should Have Accessible Name By Default

Since this function's HTML element is a div container with the button role (as it should be the standards), it should also have some accessible name.

You can detect this by making a CRA with this hamburger menu, and running it through lighthouse (either locally or after deployment). This issue will show up: https://web.dev/button-name/.

We can set an accessible name through the 'label' property but that should default to some reasonable value.

Edit:
After further testing, it seems that using the 'label' property doesn't resolve the accessible name issue.

Buttons do not have an accessible name

This is a simple fix, pass the aria-label prop to the component.

Maybe something like this:

<Hamburguer aria-label="Open menu" />

Here's more information

aria-controls to beef up accessibility

I've been using this package for a while and I've got no complaints; it's awesome 🔥

Would it be possible to add a controls prop to the hamburgers? It would provide more context to screen readers about the actual item the hamburger is controlling.

I've been working around this with this hack:

  useEffect(() => {
    const menu = document.querySelector(".hamburger-react");
    menu.setAttribute("aria-controls", "primary-navigation");
  }, []);

If it is possible, can I be assigned to the task?

using with SSR / NextJS. Warning: Did not expect server HTML to contain a <img> in <div>.

Closed

Change cursor style on icon hover

Hello, thank you for this cool library!

I am using this for my portfolio site that has a custom cursor pointer. I noticed that there is a cursor with 'pointer' styling when hovered on the menu icons.

Is there a way to disable the cursor pointer on hover?

Thanks

Financing

Hi 👋,

I'm Romuald from the Lsos, an organization that develops financial solutions for open source, and we are currently reaching out to projects we like.

We have several solutions depending on your financial goals and we can help with:

• Increasing donations
• Starting/increasing consulting work for your users
• Earning a living from your open source work
• Remunerating and hiring a small engineering team for your open source projects

For example, we can increase donations with the Lsos Donation Reminder and the Lsos Donation Fund.

We can also leverage a license clause if you are interested in receiving a substantial remuneration from your open source work. Our license clauses are designed to keep code:

1. Accessible: everything stays free for individuals and small companies — only large companies pay a small fee.
2. Open: anyone can fork the code and remove the license clause.

Large companies want two things: open source and a way to pay for software. They prefer paying for well-maintained tools rather than using free but unreliable tools. At the end of the day, a license clause can be a win for everyone.

We are focusing on solving the financials of a handful of projects first to then eventually tackle the open source financing problem at large. Let me know if you are interested.

Rom

Any way to hide burger with tailwind in breakpoints?

I'm using this with tailwind css and I can't seem to manage to hide the burger on larger screens, atm I have something like this:

I tried to set important tags in tailwind config but it doesn't seem to work still

<Hamburger className="sm:hidden" toggled="isOpen" toggle="setIsOpen"/>

Ignore me sorry for the trouble, really tired. I just encapsulated the component in a div with the hidden class..

Add aria-expanded for accessibility

Hello!

To implement the disclosure pattern, that would be nice to be able to add the aria-expanded property.
We can do something similar to #15.

I'd be happy to send a PR if you're okay with this feature :)

Thanks!

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>

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

Ability to add an adjacent label

I was curious if theres a way to add a label next to the icon (e.g. "Menu") that would also toggle the icon animation. Thanks for the help and for publishing this project!

change color on open

hello

Is it possible to have the hamburger icon black when closed and the x icon white (or other color) ?
how can i change the icon color on open?
because when it is open my menu is black.

Thanks
Inbal

The animation causes the menu to disappear on iOS Safari.

The animation causing the menu to disappear is observed specifically on iOS devices. It works correctly on my Windows laptop using Chrome, but the issue persists on Safari and Chrome browsers on my phone as well.

Can we change the area size?

I was wonder if we can change the area size,

the default size is 48, and how about if I reduce it using props, let say I change it to 32.

is that possible? thanks

Prop to set line-width

It would be great if there was a prop to set the line width. So something like this:

<Hamburger lineWidth={3} />

Keep up the epic work!! 💪😄

Please include TypeScript definitions

Thank you for this library! I would love to make use of it in my React project but I use TypeScript and the lack of bindings prevent me from doing so easily. I would appreciate if you published types for your components as well.

Highlight on mobile click

Version 2.5.0

Steps to Reproduce

When users interact with the menu on mobile devices, the burger is highlighted during the transition.

Reproduceable on the example site: https://hamburger-react.netlify.app/

Note

This may or may not be expected, but it would be nice to have the option to turn it off. I recognize most click events on mobile are associated with this behavior.

Workaround

My temporary (tested only on chrome) workaround using style jsx:

<div className='burger-container' onClick={props.onClick}>
    <Spiral size={28} label='menu' easing="ease-out" hideOutline={true}/>
</div>
<style jsx>{`
  .burger-container:first-child {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
`}</style>

webkit, moz, ms, and user-select statements taken from this stack overflow.

Doesn't work on mobile view

Love this library btw... makes life easy.. but it doesn't seem to work on mobile view and that's where I need it the most

How can I adjust the visibility?

Hello first of all.

I've used this and this

.hamburger {
  visibility: hidden;
}

and

.hamburger {
  display: none;
}

to toggle visibility but none of these worked.

Is there any other way to do this?

Thanks in advance for your help!

Add aria-label for accessibility

You could add it as a prop that can be set by the developer or you could set with a default value. I know I could contain in another wrapper that has accessibility attributes, but it would be easier if it's already embedded in.

Great library BTW

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!

Animations not working on Chrome iOS

The icon animations are not working on Chrome iOS. Using the demo site (https://hamburger-react.netlify.app/), clicking the icons transitions between states without any animation. Using other browsers on my phone (Safari, Firefox, Edge) the animations work perfectly. Issue seems to be only affecting Chrome. I am running Chrome iOS version 102.0.5005.87 and iOS version 15.5

I've attached videos of the demo site in both Chrome (not-working) and Safari (working)

Chrome.MP4

Safari.MP4