{"id":16751750,"url":"https://github.com/zcuric/vue-burger","last_synced_at":"2025-10-11T01:46:27.193Z","repository":{"id":44960979,"uuid":"212440482","full_name":"zcuric/vue-burger","owner":"zcuric","description":":hamburger: Hamburger for Vue ","archived":false,"fork":false,"pushed_at":"2022-01-15T16:15:12.000Z","size":2007,"stargazers_count":9,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-09T18:43:35.618Z","etag":null,"topics":["css","css-animations","hamburger-button","hamburger-menus","icons","javascript","vue"],"latest_commit_sha":null,"homepage":"https://zcuric.github.io/vue-burger","language":"Vue","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/zcuric.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-02T21:01:03.000Z","updated_at":"2021-10-01T19:10:21.000Z","dependencies_parsed_at":"2022-09-26T19:00:51.812Z","dependency_job_id":null,"html_url":"https://github.com/zcuric/vue-burger","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/zcuric/vue-burger","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcuric%2Fvue-burger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcuric%2Fvue-burger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcuric%2Fvue-burger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcuric%2Fvue-burger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zcuric","download_url":"https://codeload.github.com/zcuric/vue-burger/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcuric%2Fvue-burger/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279005941,"owners_count":26083987,"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","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css","css-animations","hamburger-button","hamburger-menus","icons","javascript","vue"],"created_at":"2024-10-13T02:44:48.031Z","updated_at":"2025-10-11T01:46:27.171Z","avatar_url":"https://github.com/zcuric.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"#\"\u003e\n    \u003cimg width=\"150\"src=\"./example/assets/burger.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eVue Burger\u003c/h1\u003e\n\u003cp align=\"center\"\u003eVue.js plugin for \u003ca href=\"https://github.com/jonsuh/hamburgers\"\u003eTasty CSS-animated hamburgers\u003c/a\u003e\u003c/p\u003e\n\n## About\n\nVue Burger is a Vue component/plugin that is a wrapper around [Tasty CSS-animated hamburgers](https://github.com/jonsuh/hamburgers), wellknown css library for hamburger icons. \n\n## Installation\n\n```\nnpm install vue-burger\n# or\nyarn add vue-burger\n```\n\n## Initialization\n\n```js\nimport App from './App.vue';\nimport VBurger from 'vue-burger';\nimport Vue from 'vue';\n\nVue.use(VBurger);\n\nnew Vue({\n  render: h =\u003e h(App),\n}).$mount('#app');\n```\n\n`VBurger` component can be used in without plugin initialization:\n```vue\n\u003ctemplate\u003e\n  \u003cv-burger/\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { VBurger } from 'vue-burger';\n\nexport default { \n  component: {\n    VBurger\n  }\n}\n\u003c/script\u003e\n```\n\n## Usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cv-burger type=\"arrow\" /\u003e\n\u003c/template\u003e\n```\n\n### Props\n\n### type\n  -  type: `String`, \n  -  default: 'boring'\n### burgerStyle\n  -  type: `Object`, \n  -  default: `{}`\n### ariaLabel\n  -  type: `String`, \n  -  default: 'Menu'\n### ariaControls\n  -  type: `String`, \n  -  default: 'navigation'\n### tabIndex\n  -  type: `Number`, \n  -  default: `0` \n\n### Types of burger\nAvailable types are: \n\n- 3dx,\n- 3dx-r,\n- 3dy,\n- 3dy-r,\n- 3dxy,\n- 3dxy-r,\n- arrow,\n- arrow-r,\n- arrowalt,\n- arrowalt-r,\n- arrowturn,\n- arrowturn-r,\n- boring,\n- collapse,\n- collapse-r,\n- elastic,\n- elastic-r,\n- emphatic,\n- emphatic-r,\n- minus,\n- slider,\n- slider-r,\n- spring,\n- spring-r,\n- stand,\n- stand-r,\n- spin,\n- spin-r,\n- squeeze,\n- vortex,\n- vortex-r\n\nYou can see all the types in actions on official documentation for [Hamburgers](https://jonsuh.com/hamburgers/).\n\n### Styling the burger\n\nFor styling regular CSS variables are used. Variables are defined \nin `burgerStyle` prop. Available variables:\n\n| Variable                  | Description                                 | Default value      |\n| ------------------------- | ------------------------------------------- | ------------------ |\n| `--padding`               | padding of the hamburger box                | 15px               |\n| `--bg-color`              | hamburger background color                  | transparent        |\n| `--box-width`             | hamburger box width                         | 40px               |\n| `--box-height`            | hamburger box height                        | 24px               |\n| `--layer-width`           | width of each hamburger layer               | 40px               |\n| `--layer-height`          | height of each hamburger layer              | 4px                |\n| `--layer-bg-color`        | layer background color                      | #000000            |\n| `--active-layer-bg-color` | layer background color when in active state | `--layer-bg-color` |\n\nExample: \n```vue\n\u003ctemplate\u003e\n  \u003cv-burger \n    :type=\"arrow\" \n    :burgerStyle=\"burgerStyle\"\u003e\n  \u003c/v-burger\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data() {\n      return {\n        burgerStyle: {\n          '--padding': '10px',\n          '--layer-bg-color': 'yellow',\n          '--active-layer-bg-color': '#ABABAB',\n          '--layer-width': '20px',\n        }\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n### Slots \nBurger has one named slot for setting label for accessability [as suggested by Hamburgers author.](https://github.com/jonsuh/hamburgers#accessibility)\n\n| Slot    | Description    |\n| ------- | -------------- |\n| `label` | label for a11y |\n\nExample: \n\n```vue\n  \u003cv-burger\u003e\n    \u003ctemplate v-slot:label\u003e\n      \u003cspan class=\"hamburger-label\"\u003eMenu\u003c/span\u003e\n    \u003c/template\u003e\n  \u003c/v-burger\u003e\n```\n\n### Events\n\nBurger components emits `updated` event that exposes the active state. It fires after the burger button is clicked. Check the [example](https://github.com/zcuric/vue-burger/blob/master/example/App.vue) for usage.\n\n| Event     | Description                              | Params           |\n| --------- | ---------------------------------------- | ---------------- |\n| `updated` | fired after the burger button is clicked | active (Boolean) |\n\nExample with sync modifier:\n\n```vue\n  \u003cv-burger \n    @update=\"isActive = $emit\n  \u003c/v-burger\u003e\n```\n\n## Development\n\n```\n# Running examples\nnpm run serve\n\n# Running tests\nnpm run test\n\n# Running build\nnpm run build\n```\n\n## Contributing\n\nAll contributions are welcome.\n\n## License\n\nMIT @ Zdravko Ćurić [(zcuric)](https://github.com/zcuric)\n\n_Icon made by  [Freepik](https://www.flaticon.com/authors/freepik) from [flaticon](https://www.flaticon.com/)._\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzcuric%2Fvue-burger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzcuric%2Fvue-burger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzcuric%2Fvue-burger/lists"}