---
title: "How to Create a Swiper Mobile Menu in WordPress?"
url: https://qa.nexterwp.com/docs/create-a-swiper-mobile-menu-in-wordpress/
date: 2024-12-02
modified: 2026-04-14
author: "Aditya Sharma"
description: "Suppose you have too many menu items in your mobile menu. In that case, adding a swiper effect can improve the user experience, as users can easily swipe left and..."
image: https://qa.nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Swiper-Mobile-Menu-in-WordPress_-1024x519.jpg
word_count: 222
---

# How to Create a Swiper Mobile Menu in WordPress?

## Key Takeaways

- Implements a swiper effect in mobile menus using the Mobile Menu block from Nexter Blocks.
- Requires installation and activation of Nexter Blocks to utilize the Mobile Menu block features.
- Creates a swiper mobile menu by configuring the header template with Nexter Builder and selecting 'Swiper' in the Extra Options tab.

Suppose you have too many menu items in your mobile menu. In that case, adding a swiper effect can improve the user experience, as users can easily swipe left and right to navigate the menu items. 

With the Mobile Menu block from the Nexter Blocks, you can easily add a swiper 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, 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. From the **Style** section, select **Style 1**.

![](https://qa.nexterwp.com/wp-content/uploads/2024/12/mobile-menu-layout-style-1-extra-options-swiper.gif)

Then, select the appropriate menu position.

2. Add your desired screen width in the **Open Mobile Menu** section so the menu is only visible on mobile.

3. Then, in the **Main Menu** tab, add menu items. Make sure to add enough menu items so it goes beyond the visible screen.

4. Finally, go to the **Extra Options** tab and select **Swiper **from the **Display** section. 

Now you’ll see a beautiful swiper mobile menu, which users can swipe left and right to navigate the menu.

![](https://qa.nexterwp.com/wp-content/uploads/2024/12/mobile-menu-swiper-demo.gif)