react-burger-menu is a React component that provides an off-canvas sidebar with multiple animation effects using CSS transitions and SVG path animations.
The component solves the problem of adding a hamburger menu sidebar to React applications without building one from scratch. It ships with ten pre-built animation styles—slide, stack, elastic, bubble, push, pushRotate, scaleDown, scaleRotate, fallDown, and reveal—each using CSS transitions or SVG animations to create the opening effect. The sidebar appears as an off-canvas element that slides or transforms into view when triggered, and menu items are passed as child elements using JSX. Some animations require wrapper elements around page content to achieve their effect, which are configured via props.
The tool suits projects that need a polished hamburger menu without custom animation work. It works with React 16.8 and later through Hooks, with an older version available for earlier React releases. The README mentions a Redux integration package for projects using Redux state management. Developers should note that certain animations require specific page structure—an outer container and page wrapper element—while simpler animations like slide and stack do not. The component supports opening from either left or right, with positioning controlled through CSS and props.
The project maintains an active test suite using Mocha, Chai, Sinon, and jsdom, with both single-run and watch modes available. A live demo showcasing all animation styles is provided to help developers preview behavior before adoption. The codebase follows Prettier code style standards.
