What react-burger-menu does and when to use it

react-burger-menu is an off-canvas (slide-out) navigation component collection for React. It gives you a set of ready-made animated hamburger menus and sidebar patterns — slide, push, stack, elastic, bubble and more — with light-weight props to control behavior and styles. Use it when you need a quick, accessible mobile menu, or a stylized sidebar for dashboards and admin UIs.

The library is pragmatic: it handles the visual, animation, and basic accessibility wiring so you don’t rewrite burger-and-sidebar logic. It’s ideal for teams that want polished menu animations without reinventing CSS transforms, or for prototypes that will eventually be hardened for performance and a11y.

Because it’s focused on presentation and interaction, react-burger-menu works best when combined with a routing solution (React Router) or a state-management approach for controlled open/close behavior. If you need full keyboard traps, focus-lock, or server-side rendering optimizations, the component can be extended with small integrations.

Installation and getting started (setup and basic example)

Installing react-burger-menu is a single npm (or yarn) command. That’s the quickest way to get a working React slide-out menu into your project. You can combine the package with your CSS-in-JS solution or plain CSS for custom styles.

Run one of these in your project root to install the package:

npm install react-burger-menu
# or
yarn add react-burger-menu

Import and mount a menu in a component. This example uses the default slide menu and basic links. Note how props like pageWrapId and outerContainerId help animate the page content when the menu opens.

import { slide as Menu } from 'react-burger-menu';

function App() {
  return (
    <div id="outer-container">
      <Menu pageWrapId={'page-wrap'} outerContainerId={'outer-container'}>
        <a id="home" className="menu-item" href="/">Home</a>
        <a id="about" className="menu-item" href="/about">About</a>
      </Menu>

      <main id="page-wrap">
        <h2>Your content here</h2>
      </main>
    </div>
  );
}

For a step-by-step tutorial and deeper examples, see this react-burger-menu tutorial on Dev.to and the package README on npm. The react-burger-menu tutorial linked earlier includes setup nuances and animation tips.

Core API, menu types and customization

The component exposes several menu types: slide, stack, elastic, bubble, push, pushRotate, scaleDown, scaleRotate, and more. Each type differs by how the menu and page content animate relative to each other. You choose by importing the variant you want: e.g. import { elastic as Menu } from ‘react-burger-menu’.

Key props to know: isOpen / onStateChange (controlled mode), customBurgerIcon, customCrossIcon, width, styles (JS styling object), pageWrapId, outerContainerId, and disableOverlayClick. The styles prop accepts a dictionary of element keys (bmBurgerButton, bmMenuWrap, bmOverlay, etc.) so you can programmatically adjust colors, sizes, and z-index without touching a global stylesheet.

Customization approaches vary by project. Use the inline styles prop for small tweaks (colors, width), a shared CSS module for complex themes, or CSS variables to let runtime themes adjust the menu. If you want a unique animation curve, override the transform/transition properties or wrap the menu in a parent that animates with intersection observers or scroll-triggered logic.

• Common menu types: slide, push, stack, elastic — choose by UX intent.
• Style points: prefer transform (translate3d) animations for GPU acceleration.
• Controlled vs uncontrolled: use isOpen/onStateChange when integrating with app state or routing.

Animations, styles and mobile navigation best practices

Animations sell the experience, but poorly implemented animations hurt perceived performance. react-burger-menu uses CSS transforms and transitions that are hardware-accelerated when using translate3d. Stay away from layout-affecting properties like left/top for heavy animations; they trigger reflow and stutter on low-end devices.

For responsive and mobile-first use, hide or replace the desktop navigation with the burger menu at a breakpoint. Keep the touch target (burger icon) at least 44–48px and ensure overlay dismissals and focus management work on touch devices. Consider disabling body scroll when the menu is open — a small UX step that avoids background scroll bleed on iOS.

Want polished entry/exit animations? Combine the menu with subtle CSS easing, and optionally stagger list-item reveals inside the menu using transition-delay. Avoid long-running animations (over 300–400ms) for primary navigation; shorter, snappy transitions feel faster. For production, test on device bundles and throttled CPU profiles to ensure smoothness.

Advanced patterns: React Router, controlled menus, SSR, and examples

Integrating a burger menu with React Router is common: close the menu when a route changes. In controlled mode, wire the menu to your router state or a global store so navigation and menu state remain in sync. For example, listen for history change events and set isOpen to false to ensure the sidebar closes after navigation.

Server-side rendering requires small precautions: react-burger-menu relies on DOM ids for pageWrapId/outerContainerId. Ensure your server-rendered markup includes those ids consistently and only initialize client-side JavaScript after hydration. Avoid calling window-specific APIs during initial render.

Here’s a compact controlled example that closes the menu on route change. It’s useful with React Router’s useHistory or useNavigate hooks:

const [open, setOpen] = useState(false);

useEffect(() => {
  return history.listen(() => setOpen(false));
}, [history]);

<Menu isOpen={open} onStateChange={({isOpen}) => setOpen(isOpen)}>...</Menu>

For a practical react-burger-menu example and patterns (including styling and routing), check this hands-on article: react-burger-menu example. Also consider the official npm page for latest versions and changelogs: react-burger-menu on npm.

Performance, accessibility, and production hardening

Accessibility is non-negotiable for navigation. Ensure your menu exposes a semantic button element with aria-controls and aria-expanded attributes, and that links inside the menu have logical tab order. Use focus trapping when the menu is open to prevent screen readers or keyboard users from tabbing into background content; lightweight libraries like focus-trap-react are easy to integrate.

From a performance angle, minimize re-renders of the menu children and memoize heavy subcomponents. Prefer CSS transforms and GPU-accelerated animations; avoid animating top/left/layout properties. If your menu loads many assets (avatars, heavy images), lazy-load them or move them out of the initial menu render to speed first meaningful paint.

Finally, add tests for keyboard behavior and visual regressions for animation states. Check contrast ratios in your color scheme, validate aria labels, and ensure the overlay click/cross button both dismiss the menu. For production, audit with Lighthouse and real-device testing to catch subtle issues that don’t show up on desktop dev machines.

Micro-markup (FAQ and Article schema)

Adding structured data helps search and voice assistants surface your content. Below is a JSON-LD snippet for the FAQ section included on this page. Insert it into the head or the end of the body of your page.

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How do I install react-burger-menu?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Install with npm or yarn (npm install react-burger-menu) and import a menu variant, e.g., import { slide as Menu } from 'react-burger-menu'."
      }
    },
    {
      "@type": "Question",
      "name": "How can I customize animations in react-burger-menu?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Override the styles prop or CSS classes, prefer transform/translate3d for smooth GPU-accelerated animation, and tweak transition-duration/easing."
      }
    },
    {
      "@type": "Question",
      "name": "How do I use react-burger-menu with React Router?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Use controlled mode (isOpen/onStateChange) and close the menu on route changes (listen to history) to keep navigation predictable."
      }
    }
  ]
}

Optionally, add Article schema with headline, image, datePublished and author to increase the chance of rich results. The FAQ schema above maps directly to the FAQ block below, which helps voice search and featured snippets.

FAQ

How do I install react-burger-menu?

Install the package with npm or yarn: npm install react-burger-menu (or yarn add react-burger-menu). Import a menu style (e.g. import { slide as Menu } from 'react-burger-menu') and mount it with proper pageWrapId and outerContainerId for page animations.

How can I customize animations and styles?

Use the styles prop to supply a JavaScript styles object for specific menu parts (bmMenuWrap, bmOverlay, bmItemList, etc.). For smooth animations, adjust CSS transform and transition properties and prefer translate3d to leverage the GPU. For list stagger effects, apply small transition delays to each child item.

How do I integrate react-burger-menu with React Router so the menu closes on navigation?

Switch the menu to controlled mode by passing isOpen and onStateChange. Listen to router changes (history.listen or useNavigate) and set isOpen to false on route change. This ensures the menu closes anytime navigation occurs.