Getting started: Installation and basic setup

Installing react-burger-menu is trivial and works in any modern React project. Use npm or yarn to add the package to your dependency list. Keep this step short—what matters is wiring the menu into your page container and understanding the core props like pageWrapId and outerContainerId.

After installing, import one of the exported menu types depending on the animation you want. The library maps variants to different animations and layout behavior: Slide, Push, Stack, Elastic, and Bubble. Each variant is a React component you can render directly.

Pay attention to container ids. react-burger-menu manipulates the page container to create push/slide effects; setting pageWrapId and outerContainerId correctly avoids layout glitches and ensures animations run smoothly.

// Install
npm install react-burger-menu

// Basic usage (App.js)
import React from 'react';
import { slide as Menu } from 'react-burger-menu';

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

      <main id="page-wrap">
        <h2>Content goes here</h2>
      </main>
    </div>
  );
}
export default App;
  

Core API, props and practical examples

The API is intentionally small. Typical props you will use:

• pageWrapId — id of the page content wrapper to be transformed during animation
• outerContainerId — id of the outermost container for page-level transforms
• right — render the menu from the right side instead of left
• width — width of the menu (string or number)
• isOpen — control open/close from state

Below is a controlled example for toggling the menu from a header button. Controlled mode helps coordinate open state for mobile nav toggles or when you need to close the menu on route change.

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

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

  return (
    <div id="outer-container">
      <button onClick={() => setOpen(!open)} aria-label="Toggle menu">☰</button>

      <Menu isOpen={open} onClose={() => setOpen(false)} pageWrapId={'page-wrap'} outerContainerId={'outer-container'}>
        <a onClick={() => setOpen(false)} href="#features">Features</a>
        <a onClick={() => setOpen(false)} href="#pricing">Pricing</a>
      </Menu>

      <main id="page-wrap">...page content...</main>
    </div>
  );
}

Use the controlled approach when you integrate the menu with route changes (React Router) or analytics events. If you prefer simplicity, uncontrolled mode (no isOpen prop) still works for static sites.

Customization: styling, animations and advanced tweaks

Styling can be applied two ways: via the built-in styles prop (an object to override CSS-in-JS defaults) or by targeting the class names react-burger-menu dumps into the DOM. The styles prop is ideal for programmatic theming; CSS is better for complex selectors and media queries.

To change the animation, pick a different component (e.g., import { push as Menu } from ‘react-burger-menu’). For finer control, override transition properties on the menu and page wrap selectors, or animate children using CSS keyframes. The library exposes class names like .bm-menu, .bm-cross, and .bm-item—you can hook into those.

Example: adjust width responsively and override background and item spacing with the styles prop for a tighter mobile experience:

const styles = {
  bmMenuWrap: { position: 'fixed', height: '100%' },
  bmMenu: { background: '#111827', padding: '2.5em 1.5em', fontSize: '1.15em' },
  bmItemList: { color: '#f8fafc' },
  bmOverlay: { background: 'rgba(0,0,0,0.4)' }
};

//  ... 

Remember: animation performance depends on which CSS properties you animate. Prefer transforms (translateX) and opacity; avoid animating left/top and large repaints. The library uses transform where possible, but if you extend the animation, follow the same guidelines to maintain 60fps.

Mobile patterns, responsive behavior, and accessibility

For mobile navigation, keep tap targets large, limit the number of menu items, and prefer full-height slide-outs for discoverability. Set menu width in percentages or CSS variables (e.g., width={‘75%’} or width={‘var(–menu-width)’}), and adjust at breakpoints so the desktop sidebar becomes a narrow drawer on phones.

Accessibility is not automatic. Add semantic markup and ARIA attributes: aria-label on the menu button, role=”navigation” on the menu container, and manage focus when the menu opens. Use focus traps or return focus to the toggle after closing. Test keyboard navigation (Tab/Shift+Tab, Esc to close) and screen reader announcements.

A few implementation notes:
– Ensure the burger button has aria-expanded which reflects isOpen.
– When menu is open, set inert or aria-hidden on the main content so screen readers don’t double-announce.
– For touch devices, verify swipe-to-open isn’t interfering with native gestures.

Advanced patterns, troubleshooting, and performance tips

Use react-burger-menu for more than simple site navs: nested menus for app dashboards, account panels, and contextual sidebars are all possible. For nested lists, prefer progressive disclosure with submenus revealed inside the same drawer instead of adding nested slide-outs—too many layers confuse users and keyboard navigation.

Common issues and fixes:
– Menu not animating: confirm pageWrapId and outerContainerId match actual element ids.
– Overflow causing scrollbars: set html/body height:100% and ensure no conflicting position styles.
– Menu covers fixed headers: adjust z-index and account for header offset using CSS variables or padding on the menu.

Performance checklist: animate transforms, limit heavy shadows, avoid large images inside the drawer, and memoize any menu children that require expensive renders. For SSR, render the menu closed on first paint and hydrate open state on the client to avoid layout shift.

Where to learn more and examples

For a step-by-step walkthrough and a set of practical advanced examples (including nested slide-outs and fine-grained animation control), see this in-depth advanced slide-out menus with react-burger-menu tutorial.

If you prefer a shorter starter tutorial, search for “react-burger-menu tutorial” and you’ll find quick examples and setup guides that mirror the code in this article. The community around react-burger-menu has many forks and style examples to jumpstart theming.

Want a live demo? Clone a small repo, toggle variants (slide, push, stack) and test the menu across desktop and mobile breakpoints. Experiment with the react-burger-menu styles prop so you can theme the drawer without changing global CSS.

FAQ

How do I install react-burger-menu in a React project?

Install with npm or yarn (npm install react-burger-menu). Import the menu component you want (e.g., import { slide as Menu } from ‘react-burger-menu’), add pageWrapId and outerContainerId to match your DOM, and render links or components inside the <Menu>.

How can I customize animations and styles in react-burger-menu?

Select the animation by importing the corresponding component (slide, push, stack, elastic, bubble). Use the styles prop to override default styling or target the class names (.bm-menu, .bm-item) in your CSS. Prefer transform-based transitions and adjust width/overlay for responsive behavior.

Is react-burger-menu mobile-friendly and accessible?

Yes, it’s designed for mobile slide-out navigation, but accessibility requires developer attention: add aria-labels, aria-expanded, manage focus when opening/closing, and test with screen readers and keyboard navigation. Use responsive sizing for mobile hit targets.