{"id":15015814,"url":"https://github.com/adopted-ember-addons/ember-burger-menu","last_synced_at":"2025-04-04T17:10:25.337Z","repository":{"id":37438060,"uuid":"72814571","full_name":"adopted-ember-addons/ember-burger-menu","owner":"adopted-ember-addons","description":"An off-canvas sidebar component with a collection of animations and styles using CSS transitions","archived":false,"fork":false,"pushed_at":"2023-03-04T15:25:57.000Z","size":6050,"stargazers_count":278,"open_issues_count":32,"forks_count":48,"subscribers_count":14,"default_branch":"main","last_synced_at":"2025-03-28T16:11:19.558Z","etag":null,"topics":["animations","burger-menu","ember","ember-addon","menu","menu-animation"],"latest_commit_sha":null,"homepage":"https://adopted-ember-addons.github.io/ember-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/adopted-ember-addons.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-11-04T04:35:06.000Z","updated_at":"2025-02-04T13:53:59.000Z","dependencies_parsed_at":"2023-07-17T06:33:28.931Z","dependency_job_id":null,"html_url":"https://github.com/adopted-ember-addons/ember-burger-menu","commit_stats":{"total_commits":114,"total_committers":13,"mean_commits":8.76923076923077,"dds":"0.26315789473684215","last_synced_commit":"eb5359d355245214925657d0f077d0b2536a3911"},"previous_names":["offirgolan/ember-burger-menu"],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adopted-ember-addons%2Fember-burger-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adopted-ember-addons%2Fember-burger-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adopted-ember-addons%2Fember-burger-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adopted-ember-addons%2Fember-burger-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adopted-ember-addons","download_url":"https://codeload.github.com/adopted-ember-addons/ember-burger-menu/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217222,"owners_count":20903009,"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","burger-menu","ember","ember-addon","menu","menu-animation"],"created_at":"2024-09-24T19:47:59.280Z","updated_at":"2025-04-04T17:10:25.318Z","avatar_url":"https://github.com/adopted-ember-addons.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-burger-menu\n\n[![CI](https://github.com/adopted-ember-addons/ember-burger-menu/actions/workflows/ci.yml/badge.svg)](https://github.com/adopted-ember-addons/ember-burger-menu/actions/workflows/ci.yml)\n[![npm version](https://badge.fury.io/js/ember-burger-menu.svg)](http://badge.fury.io/js/ember-burger-menu)\n\nAn off-canvas sidebar component with a collection of animations and styles using CSS transitions\n\n## Features\n\n- Easy to use \u0026 setup off-canvas menu\n- Mix and match from many menu \u0026 menu item animations\n- Swipe gesture support with changeable thresholds\n- Easily create your own animations\n\n## Compatibility\n\n* Ember.js v3.24 or above\n* Ember CLI v3.24 or above\n* Node.js v12 or above\n\n## Installation\n\n```\nember install ember-burger-menu\n```\n\n### Sass\n\nInstalling ember-burger-menu should also install ember-cli-sass and automatically create a scss file under `app/styles/app.scss` with\n\n```sass\n// app/styles/app.scss\n\n@import 'ember-burger-menu';\n```\n\n#### Overriding Variables\n\nUsing sass, you can override default variables and easily change the default behavior of ember-burger-menu.\nSee [variables.scss](app/styles/ember-burger-menu/variables.scss) for a list of variables you can change.\n\n```sass\n// app/styles/app.scss\n\n// Burger Menu Overrides\n$bm-transition-duration: 0.3s;\n$bm-overlay-background: rgba(0, 0, 0, 0.7);\n\n// Import all the styles!\n@import 'ember-burger-menu';\n```\n\n#### Import Only What You Need\n\nUsing sass, you can import only the styles you need for the animations you use.\n\n```sass\n// Core Styles\n@import 'ember-burger-menu/variables';\n@import 'ember-burger-menu/structure';\n\n// Animations\n@import 'ember-burger-menu/animations/push';\n@import 'ember-burger-menu/animations/menu-item/stack';\n```\n\n## Helpful Links\n\n- ### [Live Demo](http://adopted-ember-addons.github.io/ember-burger-menu)\n\n- ### [Changelog](CHANGELOG.md)\n\n## Looking for help?\nIf it is a bug [please open an issue on GitHub](http://github.com/adopted-ember-addons/ember-burger-menu/issues).\n\n## Animations\n\n### Menu Animations\n\n- slide\n- reveal\n- push\n- fall-down\n- open-door\n- push-rotate\n- rotate-out\n- scale-up\n- scale-down\n- scale-rotate\n- slide-reverse\n- squeeze\n\n### Menu Item Animations\n\n- push\n- stack\n\n## Usage\n\nThis addon utilizes contextual components to be able to correctly control and animate necessary elements.\n\n```hbs\n{{#burger-menu as |burger|}}\n  {{#burger.menu itemTagName=\"li\" as |menu|}}\n    \u003cbutton {{on \"click\" burger.state.closeMenu}}\u003eClose\u003c/button\u003e\n\n    \u003cul\u003e\n      {{#menu.item}}\n        \u003cLinkTo @route=\"features\"\u003e\n          Features\n        \u003c/LinkTo\u003e\n      {{/menu.item}}\n\n      {{#menu.item}}\n        \u003cLinkTo @route=\"about\"\u003e\n          About\n        \u003c/LinkTo\u003e\n      {{/menu.item}}\n\n      {{#menu.item}}\n        \u003cLinkTo @route=\"contact\"\u003e\n          Contact Us\n        \u003c/LinkTo\u003e\n      {{/menu.item}}\n    \u003c/ul\u003e\n  {{/burger.menu}}\n\n  {{#burger.outlet}}\n    \u003cbutton {{on \"click\" burger.state.toggleMenu}}\u003eMenu\u003c/button\u003e\n    {{outlet}}\n  {{/burger.outlet}}\n{{/burger-menu}}\n```\n\n## Components\n\n### `{{burger-menu}}`\n\n#### Options\n\n- #### `open`\n\n  The current open state of the menu.\n\n  **Default: false**\n\n- #### `animation`\n\n  The menu animation. See [Animations](#menu-animations) for the list of available animations.\n\n  **Default: slide**\n\n- #### `itemAnimation`\n\n  The menu item animation. See [Item Animations](#menu-item-animations) for the list of available item animations.\n\n  **Default: null**\n\n- #### `position`\n\n  The menu's open position. Can either be _left_ or _right_\n\n  **Default: left**\n\n- #### `width`\n\n  The menu's width (in px).\n\n  **Default: 300**\n\n- #### `locked`\n\n  Lock the menu in its current open / closed state.\n\n  **Default: false**\n\n- #### `customAnimation`\n\n  Override of the menu's styles with your own implementation. See [Custom Animations](#custom-animations) for more details.\n\n- #### `translucentOverlay`\n\n  Whether the outlet has a translucent overlay over it once the menu is opened.\n\n  **Default: true**\n\n- #### `dismissOnClick`\n\n  Whether the menu can be dismissed when clicking outside of it.\n\n  **Default: true**\n\n- #### `dismissOnEsc`\n\n  Whether the menu can be closed when pressing the ESC key.\n\n  **Default: true**\n\n- #### `gesturesEnabled`\n\n  Whether the menu can be open / closed using gestures. The only available gesture currently is swipe.\n\n  **Default: true**\n\n- #### `minSwipeDistance`\n\n  The minimum distance (in px) the user must swipe to register as valid.\n\n  **Default: 150**\n\n\n- #### `maxSwipeTime`\n\n  The maximum amount of time (in ms) it must take the user to swipe to be registered as valid .\n\n  **Default: 300**\n\n### `{{burger.outlet}}`\n\nThis component is where all your content should be placed.\n\n### `{{burger.menu}}`\n\nEverything rendered here will be inside the menu.\n\n#### Options\n\n- #### `itemTagName`\n\n  The default tagName that will be used by the `{{menu.item}}` component.\n\n  **Default: div**\n\n- #### `dismissOnItemClick`\n\n  Close the menu on click of a `{{menu.item}}`.\n\n  **Default: false**\n\n#### Actions\n\n- #### `onOpen`\n\n  Triggered when the menu is opening\n\n- #### `onClose`\n\n  Triggered when the menu is closing\n\n### `{{menu.item}}`\n\nThe individual menu item. This is required if you have specified an [itemAnimation](#itemanimation).\n\n#### Options\n\n- #### `dismissOnClick`\n\n  Close the menu on click.\n\n  **Default: false**\n\n## The Menu State\n\nThe `{{burger-menu}}` component exposes multiple contextual components, but it also exposes a state object.\n\nYou can use the menu state object to modify pretty much any property.\n\n- `open`\n- `width`\n- `position`\n- `animation`\n- `itemAnimation`\n- `customAnimation`\n\nThe state object also exposes some actions:\n\n- #### `open`\n\n  ```hbs\n  \u003cbutton {{on \"click\" burger.state.openMenu}}\u003eOpen\u003c/button\u003e\n  ```\n\n- #### `close`\n\n  ```hbs\n  \u003cbutton {{on \"click\" burger.state.closeMenu}}\u003eClose\u003c/button\u003e\n  ```\n\n- #### `toggle`\n\n  ```hbs\n  \u003cbutton {{on \"click\" burger.state.toggleMenu}}\u003eToggle\u003c/button\u003e\n  ```\n\n# Custom Animations\n\nIf you're not impressed with the in-house animations and want to create your own, all you have to do is pass the following class to the `customAnimation` property in the `{{burger-menu}}` component. If you think your animation would be a good addition to the existing collection, feel free to open a PR with it!\n\n```js\nimport Animation from 'ember-burger-menu/animations/base';\n\nexport default Animation.extend({\n  // CSS class names to be able to target our menu\n  animation: 'my-custom-animation',\n  itemAnimation: 'my-custom-item-animation',\n\n  container(open, width, right) {\n    return {};\n  },\n\n  outlet(open, width, right) {\n    return {\n      transform: open ? right ? `translate3d(-${width}px, 0, 0)` : `translate3d(${width}px, 0, 0)` : ''\n    };\n  },\n\n  menu(open, width, right) {\n    return {};\n  },\n\n  menuItem(open, width, right, index) {\n    return {\n      transform: open ? '' : `translate3d(0, ${(index + 1) * 500}px, 0)`\n    };\n  }\n});\n\n```\n\n_**Note:** You don't need to worry about prefixing your CSS attributes as it will be done for you._\n\nIf you need to add some base CSS to your animation, you can target the menu as such:\n\n```sass\n.ember-burger-menu.bm--my-custom-animation {\n  #{$bm-menu} {}\n  \u003e .bm-outlet {}\n\n  \u0026.is-open {\n    #{$bm-menu} {}\n    \u003e .bm-outlet {}\n  }\n}\n```\n\nAnd the menu items as such:\n\n```sass\n.ember-burger-menu.bm-item--my-custom-item-animation {\n  #{$bm-menu} {\n    .bm-menu-item {}\n  }\n\n  \u0026.is-open {\n    #{$bm-menu} {\n      .bm-menu-item {}\n    }\n  }\n}\n```\n\nTo use our new custom animation, all we have to do is pass the class to\nthe `customAnimation` option in the `{{burger-menu}}` component.\n\n```js\nimport MyCustomAnimation from 'path/to/my-custom-animation';\n\nexport default Ember.Component.extend({\n  MyCustomAnimation\n});\n```\n\n```hbs\n{{#burger-menu customAnimation=MyCustomAnimation}}\n  ...\n{{/burger-menu}}\n```\n\n# Contributing\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadopted-ember-addons%2Fember-burger-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadopted-ember-addons%2Fember-burger-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadopted-ember-addons%2Fember-burger-menu/lists"}