---
title: "How to Create a Popup Mobile Menu with Pattern in WordPress?"
url: https://qa.nexterwp.com/docs/create-a-popup-mobile-menu-with-pattern-in-wordpress/
date: 2024-12-02
modified: 2026-04-14
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://qa.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

- Utilizes the Mobile Menu block from Nexter Blocks to create a popup mobile menu in WordPress.
- Requires installation and activation of Nexter Blocks to access the Mobile Menu features.
- Configures popup settings including open direction and content width using the Nexter Builder.

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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.nexterwp.com/wp-content/uploads/2024/12/mobile-menu-layout-extra-toggle-pattern-demo.gif)