{"id":20961780,"url":"https://github.com/heimrichhannot/contao-buttermenu-bundle","last_synced_at":"2025-05-14T07:31:02.073Z","repository":{"id":62515447,"uuid":"154470121","full_name":"heimrichhannot/contao-buttermenu-bundle","owner":"heimrichhannot","description":"Animated navigation menu for contao with hover-dropdown and off-canvas support.","archived":false,"fork":false,"pushed_at":"2024-11-08T09:14:08.000Z","size":39,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-22T02:14:57.180Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/heimrichhannot.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":"2018-10-24T08:58:02.000Z","updated_at":"2024-11-08T09:13:52.000Z","dependencies_parsed_at":"2022-11-02T13:03:36.982Z","dependency_job_id":null,"html_url":"https://github.com/heimrichhannot/contao-buttermenu-bundle","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-buttermenu-bundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-buttermenu-bundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-buttermenu-bundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-buttermenu-bundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heimrichhannot","download_url":"https://codeload.github.com/heimrichhannot/contao-buttermenu-bundle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254094849,"owners_count":22013648,"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":[],"created_at":"2024-11-19T02:17:19.703Z","updated_at":"2025-05-14T07:31:00.377Z","avatar_url":"https://github.com/heimrichhannot.png","language":"PHP","readme":"# Butter menu \n\n[![](https://img.shields.io/packagist/v/heimrichhannot/contao-butermenu-bundle.svg)](https://packagist.org/packages/heimrichhannot/contao-butermenu-bundle)\n[![](https://img.shields.io/packagist/dt/heimrichhannot/contao-butermenu-bundle.svg)](https://packagist.org/packages/heimrichhannot/contao-butermenu-bundle/stats)\n\nA smooth animated navigation menu for contao with hover dropdown (big screens for instance) and off-canvas (mobile for instance) modes. \n\n## Technical Instructions\n\n- Attach the butter menu to your `navigation` front end module by using the `nav_buttermenu_default` template.\n- Enable `contao-buttermenu-bundle` as `active entry` at the `page setting` (Encore Fieldset)\n- Add `@import \"~contao-buttermenu/scss/_buttermenu\";` to your project scss file and adjust variables before if required\n\n\n## Styling\n\nBy default no styles are generated, set `$bm-menu-generate-classes` to `true` to style butter menu with defaults, otherwise use the provided mixins as stated below.\n\nRequired mixins for the default mode (include inside your media queries):\n\n```\n@include media-breakpoint-up(md) {\n\t@include bm-default(theme-color('primary'));\n}\n```\n\nRequired mixins for the compact off-canvas mode (include this inside your media queries):\n\n```\n// .header_compact.scss\n@include media-breakpoint-down(sm) {\n\t@include bm-compact-basics();\n\t@include bm-compact-backdrop();\n\t@include bm-compact-default(theme-color('primary'));\n}\n```\n\n\n\n### Using the compact off-canvas mode\n\nIf you have `data-bm-compact-mode` set to `off-canvas` on your `nav_buttermenu_default` template, you will need an canvas wrapper and for sure an burger menu.\nThe example below shows how it can work:\n\n```\n\u003cdiv class=\"header-static\"\u003e\n\t\u003ca href=\"/\" class=\"header-brand\"\u003e\n\t\t\u003cimg src=\"logo.png\" alt=\"logo\"\n\t\u003c/a\u003e\n\t\u003cbutton class=\"hamburger hamburger--spin\" type=\"button\" data-bm-compact-toggle=\".bm-compact-canvas\" aria-controls=\".header-collapse\" aria-expanded=\"false\"\u003e\n\t  \u003cspan class=\"hamburger-box\"\u003e\n\t    \u003cspan class=\"hamburger-inner\"\u003e\u003c/span\u003e\n\t  \u003c/span\u003e\n\t\u003c/button\u003e\n\u003c/div\u003e\n\u003cdiv class=\"header-collapse bm-compact-canvas\" aria-hidden=\"false\"\u003e\n\t\u003cdiv class=\"header-language\"\u003e\n\t\t\u003c!-- Optional: Change language module can be here by using {{insert_module::x}} --\u003e\n\t\u003c/div\u003e\n\t\u003cdiv class=\"header-meta\"\u003e\n\t\t\u003c!-- Optional: Meta navigation can be here by using {{insert_module::x}} --\u003e\n\t\u003c/div\u003e\n\t\u003cdiv class=\"header-navbar bm-compact-scroll\"\u003e\n\t\t\u003c!-- Required: Insert your Navigation menu module with attached nav_buttermenu_default here by using {{insert_module::x}} --\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\nWe recommend using animated [Hamburger icons from Jonathan Suh](https://jonsuh.com/hamburgers/). The `is-active` will be added automatically upon off-canvas menu is opened. \n\n### Settings\n\nAttribute | Scope | Default | Description\n------ | ---- | ------- | -----------\ndata-bm-parent-muted | bm-menu | `touch` | Change to `click`, `touch` or `both` to prevent click on parent dropdown links\ndata-bm-min-left | bm-menu | 15 | Minimum offset to left side of viewport.\ndata-bm-min-right | bm-menu | 15 | Minimum offset to left side of viewport.\ndata-bm-columns | bm-menu | 2 | Column count. Limit height for ul \u003e li inside dropdowns to provide flexbox column support with proper height calculation.\ndata-bm-column-min | bm-menu | 5 | Activate columns from `data-bm-columns` only if more than provided list item count. \ndata-bm-compact-breakpoint | bm-menu | 768 | The viewport breakpoint width below buttermenu will work in mobile `compact` mode. \ndata-bm-arrow-alignment | bm-menu | center | Change to left, right or center to align arrow with navigation text.\ndata-bm-compact-mode | bm-menu | off-canvas | Change to `default` for normal hover/touch dropdown-toggle, or to off-canvas for an mobile menu with burger menu.\ndata-bm-compact-canvas | bm-menu | null | Declare the css-selector for the canvas container e.g. `.bm-compact-canvas`\ndata-bm-compact-toggle | any off-canvas open/close trigger | null | Declare the off-canvas container css selector e.g. `.bm-compact-canvas` on any open/close trigger like the burger menu button.\ndata-bm-compact-show-current | bm-menu | false | If tru, upon open buttermenu in compact mode current active submenu is active (set to false for proper accessibility support)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheimrichhannot%2Fcontao-buttermenu-bundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheimrichhannot%2Fcontao-buttermenu-bundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheimrichhannot%2Fcontao-buttermenu-bundle/lists"}