{"id":13398517,"url":"https://github.com/negomi/react-burger-menu","last_synced_at":"2025-05-14T07:07:59.220Z","repository":{"id":37664554,"uuid":"39150065","full_name":"negomi/react-burger-menu","owner":"negomi","description":":hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations","archived":false,"fork":false,"pushed_at":"2025-04-26T02:13:20.000Z","size":8542,"stargazers_count":5097,"open_issues_count":4,"forks_count":583,"subscribers_count":54,"default_branch":"main","last_synced_at":"2025-05-07T06:38:33.582Z","etag":null,"topics":["animations","component","hamburger-menu","react","sidebar","transitions"],"latest_commit_sha":null,"homepage":"http://negomi.github.io/react-burger-menu/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/negomi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2015-07-15T17:13:23.000Z","updated_at":"2025-05-01T19:41:37.000Z","dependencies_parsed_at":"2023-02-08T17:31:33.401Z","dependency_job_id":"6282daf7-69b8-41a7-b423-1cf1e2c5a138","html_url":"https://github.com/negomi/react-burger-menu","commit_stats":{"total_commits":529,"total_committers":41,"mean_commits":"12.902439024390244","dds":"0.14366729678638945","last_synced_commit":"a3289372561683b621b8f6c830e80c10aae719b4"},"previous_names":[],"tags_count":133,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/negomi%2Freact-burger-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/negomi%2Freact-burger-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/negomi%2Freact-burger-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/negomi%2Freact-burger-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/negomi","download_url":"https://codeload.github.com/negomi/react-burger-menu/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254092650,"owners_count":22013290,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animations","component","hamburger-menu","react","sidebar","transitions"],"created_at":"2024-07-30T19:00:27.853Z","updated_at":"2025-05-14T07:07:59.201Z","avatar_url":"https://github.com/negomi.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI Components","Uncategorized","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","[Vanilla JavaScript](https://plainjs.com/) plugins","🎨 Design \u0026 Creative"],"sub_categories":["Menu","Uncategorized"],"readme":"react-burger-menu [![Build Status](https://travis-ci.org/negomi/react-burger-menu.svg?branch=main)](https://travis-ci.org/negomi/react-burger-menu) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n=================\n\nAn off-canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations.\n\n*Using Redux? Check out [redux-burger-menu](https://github.com/negomi/redux-burger-menu) for easy integration of react-burger-menu into your project.*\n\n## Demo \u0026 examples\n\nLive demo: [negomi.github.io/react-burger-menu](https://negomi.github.io/react-burger-menu/)\n\nTo build the examples locally, first make sure you're using Node \u003c11.0.0. Then run:\n\n```\nnpm install\nnpm start\n```\n\nThen open [`localhost:8000`](http://localhost:8000) in a browser.\n\n## Tests\n\nThe test suite uses [Mocha](https://mochajs.org/), [Chai](https://chaijs.com/) and [Sinon](https://sinonjs.org/), with [jsdom](https://github.com/tmpvar/jsdom).\n\nTo run the tests once, run:\n\n```\nnpm test\n```\n\nTo run them with a watcher, run:\n\n```\nnpm run test:watch\n```\n\n## Installation\n\nThe easiest way to use react-burger-menu is to install it from npm and include it in your own React build process (using [Browserify](https://browserify.org), [Webpack](https://webpack.github.io/), etc).\n\nYou can also use the standalone build by including `dist/react-burger-menu.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.\n\nVersion 3.x uses Hooks, so if you're using React 16.8+:\n```\nnpm install react-burger-menu --save\n```\n\nIf you're using an earlier version of React:\n```\nnpm install react-burger-menu@^2.9.2 --save\n```\n\n## Usage\n\nItems for the sidebar should be passed as child elements of the component using JSX.\n\n``` javascript\nimport { slide as Menu } from 'react-burger-menu'\n\nclass Example extends React.Component {\n  showSettings (event) {\n    event.preventDefault();\n    .\n    .\n    .\n  }\n\n  render () {\n    // NOTE: You also need to provide styles, see https://github.com/negomi/react-burger-menu#styling\n    return (\n      \u003cMenu\u003e\n        \u003ca id=\"home\" className=\"menu-item\" href=\"/\"\u003eHome\u003c/a\u003e\n        \u003ca id=\"about\" className=\"menu-item\" href=\"/about\"\u003eAbout\u003c/a\u003e\n        \u003ca id=\"contact\" className=\"menu-item\" href=\"/contact\"\u003eContact\u003c/a\u003e\n        \u003ca onClick={ this.showSettings } className=\"menu-item--small\" href=\"\"\u003eSettings\u003c/a\u003e\n      \u003c/Menu\u003e\n    );\n  }\n}\n```\n\n### Animations\n\nThe example above imported `slide` which renders a menu that slides in on the page when the burger icon is clicked. To use a different animation you can substitute `slide` with any of the following (check out the [demo](https://negomi.github.io/react-burger-menu/) to see the animations in action):\n\n* `slide`\n* `stack`\n* `elastic`\n* `bubble`\n* `push`\n* `pushRotate`\n* `scaleDown`\n* `scaleRotate`\n* `fallDown`\n* `reveal`\n\n### Properties\n\nSome animations require certain other elements to be on your page:\n\n* **Page wrapper** - an element wrapping the rest of the content on your page (except elements with fixed positioning - see [the wiki](https://github.com/negomi/react-burger-menu/wiki/FAQ#i-have-a-fixed-header-but-its-scrolling-with-the-rest-of-the-page-when-i-open-the-menu) for details), placed after the menu component\n\n  ``` javascript\n  \u003cMenu pageWrapId={ \"page-wrap\" } /\u003e\n  \u003cmain id=\"page-wrap\"\u003e\n    .\n    .\n    .\n  \u003c/main\u003e\n  ```\n\n* **Outer container** - an element containing everything, including the menu component\n  ``` javascript\n  \u003cdiv id=\"outer-container\"\u003e\n    \u003cMenu pageWrapId={ \"page-wrap\" } outerContainerId={ \"outer-container\" } /\u003e\n    \u003cmain id=\"page-wrap\"\u003e\n      .\n      .\n      .\n    \u003c/main\u003e\n  \u003c/div\u003e\n  ```\n\nIf you are using an animation that requires either/both of these elements, you need to give the element an ID, and pass that ID to the menu component as the `pageWrapId` and `outerContainerId` props respectively.\n\nCheck this table to see which animations require these elements:\n\nAnimation | `pageWrapId` | `outerContainerId`\n--- | :---: | :---:\n`slide` | |\n`stack` | |\n`elastic` | \u0026#x2713; | \u0026#x2713;\n`bubble` | |\n`push` | \u0026#x2713; | \u0026#x2713;\n`pushRotate` |  \u0026#x2713;  |  \u0026#x2713;\n`scaleDown` |  \u0026#x2713;  |  \u0026#x2713;\n`scaleRotate` |  \u0026#x2713;  |  \u0026#x2713;\n`fallDown` |  \u0026#x2713;  |  \u0026#x2713;\n`reveal` |  \u0026#x2713;  |  \u0026#x2713;\n\n#### Position\n\nThe menu opens from the left by default. To have it open from the right, use the `right` prop. It's just a boolean so you don't need to specify a value. Then set the position of the button using CSS.\n\n``` javascript\n\u003cMenu right /\u003e\n```\n\n#### Width\n\nYou can specify the width of the menu with the `width` prop. The default is `300`.\n\n``` javascript\n\u003cMenu width={ 280 } /\u003e\n\u003cMenu width={ '280px' } /\u003e\n\u003cMenu width={ '20%' } /\u003e\n```\n\n#### Open state\n\nYou can control whether the sidebar is open or closed with the `isOpen` prop. This is useful if you need to close the menu after a user clicks on an item in it, for example, or if you want to open the menu from some other button in addition to the standard burger icon. The default value is `false`.\n\n``` javascript\n// To render the menu open\n\u003cMenu isOpen /\u003e\n\u003cMenu isOpen={ true } /\u003e\n\n// To render the menu closed\n\u003cMenu isOpen={ false } /\u003e\n```\n\nYou can see a more detailed example of how to use `isOpen` [here](https://github.com/negomi/react-burger-menu/wiki/FAQ#i-want-to-control-the-open-state-programmatically-but-i-dont-understand-how-to-use-the-isopen-prop).\n\n*Note: If you want to render the menu open initially, you will need to set this property in your parent component's `componentDidMount()` function.*\n\n#### Open menu handler\n\nIf you keep the menu state yourself it might be convenient to pass a custom function to be used when the user triggers something that should open the menu.\n\nCalled when:\n* The user clicks on the burger icon\n\n``` javascript\n\u003cMenu onOpen={ handleOnOpen } /\u003e\n```\n\n*Note: The menu will NOT open automatically if you pass this prop, so you must handle it yourself.*\n\n#### Close menu handler\n\nIf you keep the menu state yourself it might be convenient to pass a custom function to be used when the user triggers something that should close the menu.\n\nCalled when:\n* The user clicks on the cross icon\n* The user clicks on the overlay\n* The user hits the escape key\n\n``` javascript\n\u003cMenu onClose={ handleOnClose } /\u003e\n```\n\n*Note: The menu will NOT close automatically if you pass this prop, so you must handle it yourself.*\n\n#### State change\n\nYou can detect whether the sidebar is open or closed by passing a callback function to `onStateChange`. The callback will receive an object containing the new state as its first argument.\n\n``` javascript\nvar isMenuOpen = function(state) {\n  return state.isOpen;\n};\n\n\u003cMenu onStateChange={ isMenuOpen } /\u003e\n```\n\n#### Close on Escape\n\nBy default, the menu will close when the Escape key is pressed. To disable this behavior, you can pass the `disableCloseOnEsc` prop. This is useful in cases where you want the menu to be open all the time, for example if you're implementing a responsive menu that behaves differently depending on the browser width.\n\n``` javascript\n\u003cMenu disableCloseOnEsc /\u003e\n```\n\n#### Custom `keydown` handler\n\nFor more control over global keypress functionality, you can override the handler that this component sets for `window.addEventListener('keydown', handler)`, and pass a custom function. This could be useful if you are using multiple instances of this component, for example, and want to implement functionality to ensure that a single press of the Escape key closes them all.\n\n``` javascript\nconst closeAllMenusOnEsc = (e) =\u003e {\n  e = e || window.event;\n\n  if (e.key === 'Escape' || e.keyCode === 27) {\n    this.setState({areMenusOpen: false});\n  }\n};\n\n\u003cMenuOne customOnKeyDown={closeAllMenusOnEsc} isOpen={areMenusOpen} /\u003e\n\u003cMenuTwo customOnKeyDown={closeAllMenusOnEsc} isOpen={areMenusOpen} /\u003e\n```\n*Note: Using this prop will disable all the default 'close on Escape' functionality, so you will need to handle this (including determining which key was pressed) yourself.*\n\n#### Overlay\n\nYou can turn off the default overlay with `noOverlay`.\n\n``` javascript\n\u003cMenu noOverlay /\u003e\n```\n\nYou can disable the overlay click event (i.e. prevent overlay clicks from closing the menu) with `disableOverlayClick`. This can either be a boolean, or a function that returns a boolean.\n\n``` javascript\n\u003cMenu disableOverlayClick /\u003e\n\u003cMenu disableOverlayClick={() =\u003e shouldDisableOverlayClick()} /\u003e\n```\n\n#### Transitions\n\nYou can disable all transitions/animations by passing `noTransition`.\n\n``` javascript\n\u003cMenu noTransition /\u003e\n```\n\nThis is useful if you want the menu to remain open across re-mounts, for example during SPA route changes.\n\n#### Custom icons\n\nYou can replace the default bars that make up the burger and cross icons with custom `ReactElement`s. Pass them as the `customBurgerIcon` and `customCrossIcon` props respectively.\n\n```javascript\n\u003cMenu customBurgerIcon={ \u003cimg src=\"img/icon.svg\" /\u003e } /\u003e\n\u003cMenu customCrossIcon={ \u003cimg src=\"img/cross.svg\" /\u003e } /\u003e\n```\n\nYou should adjust their size using the `.bm-burger-button` and `.bm-cross-button` classes, but the element itself will have the class `.bm-icon` or `.bm-cross` if you need to access it directly.\n\nYou can also disable the icon elements so they won't be included at all, by passing `false` to these props.\n\n```javascript\n\u003cMenu customBurgerIcon={ false } /\u003e\n\u003cMenu customCrossIcon={ false } /\u003e\n```\n\nThis can be useful if you want exclusive external control of the menu, using the `isOpen` prop.\n\n#### Custom ID and/or classNames\n\nThere are optional `id` and `className` props, which will simply add an ID or custom className to the rendered menu's outermost element. This is not required for any functionality, but could be useful for things like styling with CSS modules.\n\n``` javascript\n\u003cMenu id={ \"sidebar\" } className={ \"my-menu\" } /\u003e\n```\n\nYou can also pass custom classNames to the other elements:\n\n``` javascript\n\u003cMenu burgerButtonClassName={ \"my-class\" } /\u003e\n\u003cMenu burgerBarClassName={ \"my-class\" } /\u003e\n\u003cMenu crossButtonClassName={ \"my-class\" } /\u003e\n\u003cMenu crossClassName={ \"my-class\" } /\u003e\n\u003cMenu menuClassName={ \"my-class\" } /\u003e\n\u003cMenu morphShapeClassName={ \"my-class\" } /\u003e\n\u003cMenu itemListClassName={ \"my-class\" } /\u003e\n\u003cMenu overlayClassName={ \"my-class\" } /\u003e\n```\n\nAnd to the `html` and `body` elements (applied when the menu is open):\n```javascript\n\u003cMenu htmlClassName={ \"my-class\" } /\u003e\n\u003cMenu bodyClassName={ \"my-class\" } /\u003e\n```\n\n*Note: Passing these props will prevent the menu from applying styles to the `html` or `body` elements automatically. See [here](https://github.com/negomi/react-burger-menu/wiki/FAQ#why-is-overflow-x-hidden-being-set-on-the-html-and-body-elements) for more explanation.*\n\n#### Focusing the first menu item\n\nBy default, the menu will set focus on the first item when opened. This is to help with keyboard navigation. If you don't want this functionality, you can pass the `disableAutoFocus` prop.\n\n``` javascript\n\u003cMenu disableAutoFocus /\u003e\n```\n\n#### Custom item list element\n\nThe menu's children are all wrapped in a `nav` element by default, as navigation is likely the most common use case for this component. However, it's a general purpose sidebar, so you can change this to a `div` if you're not using it for navigation:\n\n``` javascript\n\u003cMenu itemListElement=\"div\" /\u003e\n```\n\n### Styling\n\nAll the animations are handled internally by the component. However, the visual styles (colors, fonts etc.) are not, and need to be supplied, either with CSS or with a JavaScript object passed as the `styles` prop.\n\n#### CSS\n\nThe component has the following helper classes:\n\n``` css\n/* Position and sizing of burger button */\n.bm-burger-button {\n  position: fixed;\n  width: 36px;\n  height: 30px;\n  left: 36px;\n  top: 36px;\n}\n\n/* Color/shape of burger icon bars */\n.bm-burger-bars {\n  background: #373a47;\n}\n\n/* Color/shape of burger icon bars on hover*/\n.bm-burger-bars-hover {\n  background: #a90000;\n}\n\n/* Position and sizing of clickable cross button */\n.bm-cross-button {\n  height: 24px;\n  width: 24px;\n}\n\n/* Color/shape of close button cross */\n.bm-cross {\n  background: #bdc3c7;\n}\n\n/*\nSidebar wrapper styles\nNote: Beware of modifying this element as it can break the animations - you should not need to touch it in most cases\n*/\n.bm-menu-wrap {\n  position: fixed;\n  height: 100%;\n}\n\n/* General sidebar styles */\n.bm-menu {\n  background: #373a47;\n  padding: 2.5em 1.5em 0;\n  font-size: 1.15em;\n}\n\n/* Morph shape necessary with bubble or elastic */\n.bm-morph-shape {\n  fill: #373a47;\n}\n\n/* Wrapper for item list */\n.bm-item-list {\n  color: #b8b7ad;\n  padding: 0.8em;\n}\n\n/* Individual item */\n.bm-item {\n  display: inline-block;\n}\n\n/* Styling of overlay */\n.bm-overlay {\n  background: rgba(0, 0, 0, 0.3);\n}\n```\n\n#### JavaScript\n\nThe same styles can be written as a JavaScript object like this:\n\n```javascript\nvar styles = {\n  bmBurgerButton: {\n    position: 'fixed',\n    width: '36px',\n    height: '30px',\n    left: '36px',\n    top: '36px'\n  },\n  bmBurgerBars: {\n    background: '#373a47'\n  },\n  bmBurgerBarsHover: {\n    background: '#a90000'\n  },\n  bmCrossButton: {\n    height: '24px',\n    width: '24px'\n  },\n  bmCross: {\n    background: '#bdc3c7'\n  },\n  bmMenuWrap: {\n    position: 'fixed',\n    height: '100%'\n  },\n  bmMenu: {\n    background: '#373a47',\n    padding: '2.5em 1.5em 0',\n    fontSize: '1.15em'\n  },\n  bmMorphShape: {\n    fill: '#373a47'\n  },\n  bmItemList: {\n    color: '#b8b7ad',\n    padding: '0.8em'\n  },\n  bmItem: {\n    display: 'inline-block'\n  },\n  bmOverlay: {\n    background: 'rgba(0, 0, 0, 0.3)'\n  }\n}\n\n\u003cMenu styles={ styles } /\u003e\n```\n\n### Browser support\n\nBecause this project uses CSS3 features, it's only meant for modern browsers. Some browsers currently fail to apply some of the animations correctly.\n\nChrome and Firefox have full support, but Safari and IE have strange behavior for some of the menus.\n\n### Help\n\nCheck the FAQ (https://github.com/negomi/react-burger-menu/wiki/FAQ) to see if your question has been answered already, or [open a new issue](https://github.com/negomi/react-burger-menu/issues).\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnegomi%2Freact-burger-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnegomi%2Freact-burger-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnegomi%2Freact-burger-menu/lists"}