PHPackages humanmade/hm-mega-menu-block - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. humanmade/hm-mega-menu-block ActiveWordpress-plugin[Utility & Helpers](/categories/utility) humanmade/hm-mega-menu-block ============================ A reusable Gutenberg block for creating mega menus in WordPress. v1.1.1(9mo ago)141.2k↓50%[3 issues](https://github.com/humanmade/hm-mega-menu-block/issues)GPL-2.0-or-laterJavaScriptPHP >=7.4CI failing Since Jan 30Pushed 9mo ago12 watchersCompare [ Source](https://github.com/humanmade/hm-mega-menu-block)[ Packagist](https://packagist.org/packages/humanmade/hm-mega-menu-block)[ RSS](/packages/humanmade-hm-mega-menu-block/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (3)DependenciesVersions (5)Used By (0) How to Use the HM Mega Menu Block Plugin ======================================== [](#how-to-use-the-hm-mega-menu-block-plugin) This guide explains how to create and customize a mega menu using the HM Mega Menu Block plugin. --- Installation and usage ---------------------- [](#installation-and-usage) ### Step 1: Install and Activate the HM Mega Menu Block Plugin [](#step-1-install-and-activate-the-hm-mega-menu-block-plugin) 1. **Install the Plugin**: - If the plugin is not installed yet, upload or install it from the plugin directory. 2. **Activate the Plugin**: - Go to **Plugins > Installed Plugins** and activate the `HM Mega Menu Block` plugin. --- ### Step 2: Add a New Mega Menu Template Part [](#step-2-add-a-new-mega-menu-template-part) 1. **Open the Site Editor**: - Go to **Appearance > Editor** to access the block editor. 2. **Create a New Template Part**: - In the editor, click **Add New** to create a new pattern or template part. - Assign a name to the template part (e.g., "Mega Menu"). - Designate it as a **Mega Menu** type. --- ### Step 3: Build the Mega Menu Layout [](#step-3-build-the-mega-menu-layout) 1. **Add Groups**: - In the newly created template part, use **Group** blocks to structure the menu. - Add nested groups for creating multi-level menus. 2. **Add Content**: - Insert blocks like: - **Navigation Block** for menu links. - **Heading Block** for section titles. - Other blocks (e.g., images, buttons) to customize the layout. 3. **Customize**: - Add any colors, styles, or additional elements to personalize the mega menu. --- ### Step 4: Link the Mega Menu to the Header [](#step-4-link-the-mega-menu-to-the-header) 1. **Edit the Header Template Part**: - In the Site Editor, open the **Header** template part. 2. **Insert the HM Mega Menu Block**: - Add the `HM Mega Menu Block` to the header inside the **Navigation Block**. - Add a label to the Mega Menu uat the block section, on the right side of your screen. - Link it to the template part created for the mega menu (e.g., "Mega Menu"). 3. **Save Changes** --- ### Step 5: Test the Mega Menu [](#step-5-test-the-mega-menu) 1. **Preview on the Front-End**: - Visit your site's homepage to see the mega menu in action. --- ### Step 6: Make Final Adjustments [](#step-6-make-final-adjustments) 1. **Fix Positioning Issues**: - Ensure the mega menu is properly aligned and sticky (if needed). 2. **Enhance Styling**: - Customize colors, spacing, and other design elements to match your site. --- Notes and Tips -------------- [](#notes-and-tips) - You can create multiple mega menus by repeating these steps and linking them to different template parts. - Adjust sticky positioning or other advanced behaviors as necessary. This plugin provides a flexible, code-light way to build and customize mega menus in WordPress! Release Process --------------- [](#release-process) Merges to `main` will automatically build to the `release` branch. Commits in the `release` branch may be [tagged for installation via packagist](https://packagist.org/packages/humanmade/hm-mega-menu-block) and [composer](http://getcomposer.org/), and optionally marked as releases in GitHub for download. A project may also be set up to track the `dev-release` branch to always pull in the latest built beta version. Changelog --------- [](#changelog) ### 1.1.1 [](#111) - Adds menu close when user presses escape key when the menu is not in focus. - Adds menu close when user clicks outside of the menu. - Adds menu close when another menu is opened. ### 1.0.0 / 1.0.1 [](#100--101) - Initial Release. v1.0.1 created to work around a mis-targeted tag pushed to Composer. ### Health Score 37 — LowBetter than 83% of packages Maintenance53 Moderate activity, may be stable Popularity28 Limited adoption so far Community17 Small or concentrated contributor base Maturity41 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~94 days Total 3 Last Release 277d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/4c983932c7649ed24532e0163fc83e456d2d041d4b653e3eccfd8f81b3d4f30b?d=identicon)[pamprn09](/maintainers/pamprn09) ![](https://www.gravatar.com/avatar/77dbeefb7745010589603f2ffc6ff310d8f700b58e08d52af190744c43342526?d=identicon)[roborourke](/maintainers/roborourke) --- Top Contributors [![kadamwhite](https://avatars.githubusercontent.com/u/442115?v=4)](https://github.com/kadamwhite "kadamwhite (12 commits)")[![pamprn09](https://avatars.githubusercontent.com/u/55361215?v=4)](https://github.com/pamprn09 "pamprn09 (10 commits)")[![joeleenk](https://avatars.githubusercontent.com/u/6807390?v=4)](https://github.com/joeleenk "joeleenk (6 commits)")[![tomjn](https://avatars.githubusercontent.com/u/58855?v=4)](https://github.com/tomjn "tomjn (2 commits)")[![mattheu](https://avatars.githubusercontent.com/u/494927?v=4)](https://github.com/mattheu "mattheu (1 commits)") ### Embed Badge ![Health badge](/badges/humanmade-hm-mega-menu-block/health.svg) ``` [![Health](https://phpackages.com/badges/humanmade-hm-mega-menu-block/health.svg)](https://phpackages.com/packages/humanmade-hm-mega-menu-block) ``` ### Alternatives [anlutro/l4-settings Persistent settings in Laravel. 9312.4M19](/packages/anlutro-l4-settings)[godruoyi/php-snowflake An ID Generator for PHP based on Snowflake Algorithm (Twitter announced). 8582.3M61](/packages/godruoyi-php-snowflake)[tuupola/ksuid K-Sortable Globally Unique IDs 1081.2M4](/packages/tuupola-ksuid)[mcordingley/linearalgebra Matrix math for PHP. 85146.3k1](/packages/mcordingley-linearalgebra)[hyva-themes/magento2-wysiwyg-svg Allow SVGs and all tailwind classes in CMS block and page content. 17130.8k](/packages/hyva-themes-magento2-wysiwyg-svg)[syrian-open-source/laravel-youtube-iframe-generator Laravel package allows you to generate an iframe tag with a video player depending on a youtube URL. 184.2k](/packages/syrian-open-source-laravel-youtube-iframe-generator) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)