--- title: "How to Create a Popup Mobile Menu with Pattern in WordPress?" url: https://nexterwp.com/docs/create-a-popup-mobile-menu-with-pattern-in-wordpress/ date: 2024-12-02 modified: 2026-08-18 author: "Aditya Sharma" description: "Do you want to show extra menu items or content in a mobile popup menu in WordPress? A popup menu allows for a more streamlined and user-friendly navigation experience for..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Popup-Mobile-Menu-with-Pattern-in-WordPress_-1024x519.jpg word_count: 472 --- # How to Create a Popup Mobile Menu with Pattern in WordPress? ## Key Takeaways - Nexter Blocks Mobile Menu block adds a popup mobile menu to a WordPress website and keeps the main menu compact and organized. - Pattern section lets the user select a mobile menu Pattern, and Appearance > Patterns > Add New Pattern creates the Pattern with additional menu items. - AJAX Load offers Default and Standard AJAX, and Standard AJAX requires Enable Ajax Templates in Nexter Blocks > Extra Options > Settings. Do you want to show extra menu items or content in a mobile popup menu in WordPress? A popup menu allows for a more streamlined and user-friendly navigation experience for mobile users keeping the main menu compact and organized. With the Mobile Menu block from the Nexter Blocks, you can easily add a popup mobile menu on your WordPress website. *To check the complete feature overview documentation of the Nexter Blocks Mobile Menu block,* [click here](https://nexterwp.com/docs/add-a-mobile-menu-in-wordpress/). ***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.*** [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-mobile-menu/) To do this, first, you have to create a Pattern with the additional menu items. You can go to **Appearance** > **Patterns **> **Add New Pattern **to create a Pattern. Then, add the Mobile Menu block to the header template and follow the steps - > *Note: To create the header template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)*.*  1. After selecting the appropriate style from the **Style** section, create the menu. 2. Then go to the **Extra Toggle** tab and enable **Extra Toggle**. ![](https://nexterwp.com/wp-content/uploads/2024/12/mobile-menu-layout-extra-toggle-pattern.gif) 3. After adjusting the text and icon/image, from the **Content** section, select **Pattern**.  > *Note: You can also create a Pattern from here by clicking on the ****+ Create Pattern**** button.* 4. Then, from the **Pattern** section, you have to select your mobile menu Pattern. > *Note: Once you choose a Pattern you will see a ****Backend Visibility**** toggle option, to keep the editing experience smooth by default the blocks won’t be visible on the page, turn on the toggle to see the block once done you can turn it off.* From the **AJAX Load **section, you can configure the display result of selected pattern. Here, you’ll find two options - - **Default **- You can see the result at a time. - **Standard AJAX** - You have to wait for a moment for the result to load. > *Note: To make the Standard AJAX work, make sure to enable the ****Enable Ajax Templates**** toggle from ****Nexter Blocks**** > ****Extra Options**** > ****Settings****.* You can go to **Nexter Blocks** > **Dashboard **> **Extra Options **> **Settings **> ***Enable Ajax Templates***. ![](https://nexterwp.com/wp-content/uploads/2024/12/mobile-menu-extra-options-settings-ajax-load-templates.png) Then, add the Mobile Menu block to the header template and follow the steps - > *Note: To create the header template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)*.* You can set the popup open direction from the **Direction** section. From the **Open Content Style** section, you can select the popup open style. Then, from the **Content Width** section, you can set the popup width. Here, you’ll find two options - **Custom Width/Height** - With this, you can set a custom width and height for the popup. **Full Width/Height** - With this, you can set the popup width and height to full screen size.  Now, you’ll see your additional menu item in a popup. ![](https://nexterwp.com/wp-content/uploads/2024/12/mobile-menu-layout-extra-toggle-pattern-demo.gif) ## Frequently Asked Questions **Q: What do I need before creating a popup mobile menu with a pattern in WordPress?** A: The key requirement is the Mobile Menu block from Nexter Blocks, because the popup menu is built from that block. The page also says the block needs to be installed and activated before it will work. In practice, that means the pattern-based menu setup depends on Nexter Blocks being available first, then you add the Mobile Menu block into a header template. **Q: Why is my mobile popup menu pattern not showing on the page?** A: Backend Visibility is the first thing to check, because the page says blocks are hidden on the page by default for a smoother editing experience. Turn that toggle on if you want to see the block while editing, then turn it off again when you are done. If the pattern still feels delayed, also check whether you picked Default or Standard AJAX in the AJAX Load section. **Q: Can I build this popup mobile menu without a paid builder?** A: The header template can be created with the free Nexter Builder, so the tutorial does not require a separate paid builder just to set up the header. That matters because the popup menu lives inside the header template, not as a standalone page element. For the broader setup flow, [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/) is the part used to create that header structure. **Q: What is the difference between Default and Standard AJAX for the mobile menu pattern?** A: Default shows the selected pattern result right away, while Standard AJAX makes you wait for it to load. That difference matters when you want faster perceived feedback versus an AJAX-loaded result. The page also notes that Standard AJAX only works if Enable Ajax Templates is turned on in Nexter Blocks > Extra Options > Settings. **Q: How do I make the popup open from a specific direction?** A: The direction is controlled from the Direction section in the Mobile Menu block settings. That setting matters because it changes where users see the popup enter from, which affects how natural it feels on mobile screens. The same block also lets you adjust Open Content Style and Content Width, so direction is only one part of how the popup behaves. **Q: What is the best way to control how wide the mobile popup menu appears?** A: Content Width is where you decide whether the popup stays compact or fills more of the screen. The page gives two options: Custom Width/Height for a specific size, or Full Width/Height for full-screen dimensions. For mobile navigation, that choice changes whether extra menu items feel like a small panel or a full overlay.