What is hamburger-react and when to use it

hamburger-react is a lightweight React component library that offers prebuilt animated hamburger icons and simple APIs to control toggle state, animation style, and size. It focuses on the icon/trigger — not the navigation layout — which makes it ideal if you want a polished animated menu button without a large navigation framework.

You should choose hamburger-react when you need a responsive menu trigger that: animates smoothly, integrates with React state, and remains accessible by default. It pairs well with any React navigation component, whether you use CSS slide-outs, React Router, or a custom overlay.

The component supports multiple visual variants (e.g., spring, squeeze, bubble) and offers props to control behavior. Because the package concentrates on the icon, you remain in full control of the menu panel markup and animations — the best approach for custom mobile navigation.

Installation & quick start

To get started, install the package from npm or Yarn. The component works in both Create React App and modern bundlers like Vite. After installation, import the specific style you want and control it with a boolean state in your component.

• Install: npm i hamburger-react or yarn add hamburger-react
• Import a style and use it as a controlled component with React state
• Wrap your navigation panel logic around the toggled state to open/close the menu

Example — minimal controlled usage that works well for responsive mobile navigation:

// App.jsx (React 18+)
import React, { useState } from 'react';
import { Sling as Hamburger } from 'hamburger-react';

export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <header>
      <nav>
        <Hamburger toggled={open} toggle={setOpen} size={24} duration={0.6} />
        <div aria-hidden={!open} className={open ? 'menu open' : 'menu' }>
          <a href="/home">Home</a>
          <a href="/about">About</a>
        </div>
      </nav>
    </header>
  );
}

Notes: the toggled and toggle props make the component controlled, which is recommended for predictable integration with navigation state and route changes. You can substitute any of the provided visual components (Sling, Spin, Spring, etc.).

Core API, props, and integration patterns

hamburger-react exposes a small, practical API. The most-used props are toggled, toggle, size, duration, color, and label. Controlled toggling is the preferred pattern because it lets you coordinate the icon with a sliding panel or overlay nav.

Integration pattern: use the hamburger-react component as the trigger, maintain the open/closed boolean in parent state, animate the menu panel separately (CSS transitions, framer-motion, or plain JavaScript), and ensure ARIA attributes reflect the state. This approach covers responsive use cases and voice-search-friendly UX: for example, voice queries like "open site menu" can map to the same state toggle your code uses.

Accessibility: pass a helpful label like "Open navigation menu", update aria-expanded on the controlling button (hamburger-react handles this when using the label prop), and ensure keyboard focus is trapped or restored when the nav opens for a safe, predictable navigation experience.

Responsive mobile navigation example

Below is a practical pattern: hamburger-react as the trigger, CSS-driven slide-out panel, and a couple of accessibility measures. The example keeps the menu markup minimal so you can replace the panel with a more complex nav component if needed.

Split responsibilities: the icon handles toggle symbolism and animation while the panel handles layout and content. This separation yields a cleaner codebase and lets you reuse the button across screens, preserving consistent animations and size while the menu style changes by breakpoint.

Implementation tips: use media queries to hide the inline nav on small screens, and animate the panel with transform translateX for GPU-accelerated performance. Debounce route changes if you animate the menu on navigation to avoid jarring transitions.

/* styles.css */
.menu { position: fixed; top: 0; right: 0; width: 280px; height:100%; transform: translateX(100%); transition: transform 300ms ease; background:#fff; box-shadow:-6px 0 24px rgba(0,0,0,0.12); }
.menu.open { transform: translateX(0); }
@media(min-width:768px){ .menu { display:none } }
/* Toggle button positioned in header with z-index above the panel */

By keeping the icon and panel separate, you can easily swap hamburger-react for another trigger or animate the menu panel with a library like framer-motion for more sophisticated effects.

Customization and animations

hamburger-react offers prebuilt styles, but customizing is straightforward. Change size and color props for visual tweaks; use duration for animation timing and wrap the component when you want advanced easing curves. For example, use duration={0.8} to match a slow panel reveal or duration={0.28} for snappier UI.

If you need bespoke animations beyond the provided transforms, overlay the icon with a container that applies CSS keyframes or use framer-motion on the parent to drive compound animations (icon + panel). The small API surface lets you synchronize those effects easily by using the same state boolean.

Styling the container and hit target: add CSS to increase the clickable area for mobile (recommended minimum 44–48px), and keep the icon accessible and clearly labeled. Avoid inline color-only indicators; pair color with shape and label so users relying on assistive tech get the full context.

Performance, SEO & accessibility considerations

Because hamburger-react is icon-focused, its impact on bundle size is minimal. Still, use tree-shaking imports (import the specific style) and code-split heavy menu panels if they include large third-party content. Lazy-load route-specific panels to keep initial paint fast.

For SEO, navigation markup inside the panel should remain crawlable — if you hide the menu using CSS transforms (preferred), links remain visible to crawlers. Avoid removing nav links from the DOM entirely for critical internal links; instead keep them present and visually hidden off-screen until toggled.

Accessibility checklist: label the button, update aria-expanded, manage focus (trap when open, restore focus to the toggle on close), and ensure keyboard access to all links. These steps make the mobile navigation usable to assistive technology and improve overall UX quality, which indirectly benefits engagement metrics used by search.

When not to use hamburger-react

Don't use hamburger-react as a one-stop navigation system. It only provides the icon/trigger. If you need a full-featured navigation framework (mega menus, complex flyouts, deeply nested keyboard navigation managed by a single library), consider a dedicated menu library that includes both trigger and panel logic.

Also avoid using a hamburger for desktop-only interfaces where the navigation structure benefits from visible tabs or mega menus — hamburger icons can hide discoverability for some users. Use responsive breakpoints to present the most appropriate navigation at each viewport.

Finally, if you require a custom SVG-driven animation tightly coupled with the menu content, you may prefer to build your own button component to match visual requirements exactly. hamburger-react excels when you want quick, consistent animated triggers with minimal effort.

Semantic core (expanded keywords and clusters)

• Primary queries: hamburger-react; React hamburger menu; hamburger-react tutorial; hamburger-react installation; hamburger-react getting started
• Secondary/intent-based queries: React animated menu icon; React mobile navigation; React responsive menu; React menu toggle; React mobile menu; React navigation component
• Clarifying / long-tail & LSI: hamburger-react example; hamburger-react setup; hamburger-react customization; hamburger-react animations; React responsive navigation tutorial; animated hamburger icon React; accessible React hamburger menu

This semantic core groups keywords by intent: primary (brand + immediate queries), secondary (implementation & intent), clarifying (customization and examples). Use these phrases naturally in headings, code comments, and alt text for images to maximize topical relevance.

Backlinks and further reading

Official npm package and docs: hamburger-react on npm.

Practical tutorial & example that inspired this guide: hamburger-react tutorial. Use that for a deeper walkthrough and additional animation variants.

FAQ

How do I install hamburger-react in a React project?

Install with npm or Yarn: npm install hamburger-react or yarn add hamburger-react. Import a chosen style (e.g., import { Squash as Hamburger } from 'hamburger-react') and control it with React state using the toggled and toggle props for predictable integration with your navigation panel.

How can I customize animations and styles with hamburger-react?

Customize via props like size, color, and duration, and wrap the component in a styled container to add CSS transitions or additional keyframe animations. For more advanced motion, coordinate hamburger-react with a motion library like framer-motion driven by the same state boolean.

How do I use hamburger-react for responsive mobile navigation?

Use hamburger-react as the visual trigger and maintain a boolean state in the parent component. The menu panel should animate independently (e.g., translateX for a slide-out). Hide or show the panel using CSS media queries at breakpoints so the hamburger appears only where appropriate. Always add ARIA attributes and manage focus for accessibility.