Do you want to create a swiper menu for mobile in Elementor? A swiper menu can improve the user experience as it allows users to swipe left or right to navigate the menu items.
With the Navigation Menu widget from The Plus Addons for Elementor, you can easily add a swiper menu for the mobile menu.
To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.
What It Does
The Navigation Menu widget’s Mobile Menu tab has a Menu Type dropdown with a Swiper option. Turning it on replaces the standard dropdown mobile menu with a sliding, swipe-in panel, so visitors on a phone or tablet move through your menu items with a horizontal swipe instead of tapping a toggle button open and closed.
Why It Matters
Header navigation is on every page, so friction there compounds across the whole site. A swipe-based mobile menu feels closer to a native app interaction than an accordion-style dropdown, which shortens the path between opening the menu and finding the page a visitor wants. That matters more the longer your menu list is, since a swiper panel does not force items to stack into a tall scrolling list the way a toggle dropdown does.
What You Get
Setting Menu Type to Swiper on the Mobile Menu tab gives you:
- A horizontally swipeable mobile menu panel instead of a tap-to-expand dropdown
- A custom breakpoint (Open Mobile Menu) that decides at what screen width the swiper panel takes over from the desktop menu
- A choice of Menu Content: your existing WordPress menu (Normal Menu) or an Elementor template (Template Menu)
- Navigation Alignment control for how the menu items sit inside the panel
- A Mobile Click Close Menu toggle that closes the panel automatically when a visitor taps outside it
Benefits
- Faster mobile navigation since there is no accordion panel to expand first
- Works with either a Normal Menu or a design-heavy Template Menu, so it fits both simple and complex headers
- The activation breakpoint is fully custom, so it will not fight with your theme’s own mobile trigger point
Capabilities
The Mobile Menu tab’s Menu Type dropdown offers three separate behaviors: Toggle (a dropdown panel opened by a button click), Swiper (the sliding, swipe-in panel covered in this doc), and Off Canvas (a side drawer that opens from the left or right). Choosing Swiper swaps in the swipe panel described here; Toggle and Off Canvas are separate configurations with their own documentation.
Also Read: how to create a toggle menu for mobile in Elementor if you want the dropdown-style mobile menu instead.
How It Works
Turn on Responsive Mobile Menu on the widget’s Mobile Menu tab, then set Menu Type to Swiper. The widget renders whichever Menu Content you pick, your Normal Menu or a Template Menu, inside a swiper-enabled wrapper. That wrapper only becomes active below the screen width you set in Open Mobile Menu; above it, your regular desktop menu keeps showing.
How to Use It
To do this, add the Navigation Menu widget to the header template and follow the steps –
Note: To create the header template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it.
1. From the Layout and Content tabs, select the appropriate Menu Type, Menu Direction and menu.
2. Then go to the Mobile Menu tab and enable the Responsive Mobile Menu toggle.
3. From the Menu Type dropdown, select Swiper.
In the Open Mobile Menu section, you can specify the minimum width for enabling the mobile menu. The default breakpoint is 991px.
From the Navigation Alignment section, you can align the mobile menu items.
4. Then, from the Menu Content dropdown, you can select the menu content type. Here, you will find two options –
Normal Menu – To use a WordPress default menu as a mobile menu.
Template Menu – To use an Elementor template as a mobile menu.
Also Read: how to build mega menu on Elementor.
Let us select the Normal Menu here.
5. From the Select Menu dropdown, you have to select your menu.
Now you will see a swiper menu for the mobile menu.
Also Read: how to create a toggle menu for mobile in Elementor.
Use Cases
- Header menus with many top-level items that would otherwise wrap into multiple rows on a phone screen
- Sites that already build their mobile menu as an Elementor Template Menu but still want a swipe-friendly wrapper around it
- Landing pages and product sites where a full toggle/hamburger accordion feels heavier than the rest of the design
Limitations
- Menu Type is one dropdown, so Swiper, Toggle and Off Canvas cannot be combined; only one mobile menu behavior applies per Navigation Menu widget instance
- Toggle Style options (Style 1 through Style 5, including the custom open/close icon or image) only apply when Menu Type is Toggle, so Swiper mode has no custom open/close icon control
- Open Mobile Menu sets a single breakpoint for the whole widget; it does not support separate breakpoints for different menu levels or devices
Troubleshooting
Swiper menu will not swipe on mobile. Reported in FluentSupport ticket #17280 (“My Swiper Menu Can’t Swipe in Mobile Version”). Confirm Menu Type on the Mobile Menu tab is actually set to Swiper (not Toggle) and that no custom CSS or another Elementor addon’s swiper-style script is targeting the same navigation wrapper class.
Mobile menu positioning breaks after custom header CSS. Reported in FluentSupport ticket #22079 (“‘Navigation Menu’ widget not working on the mobile menu dropdown”), where custom CSS added to the header broke the mobile panel’s positioning once opened. If you add custom CSS or JS to the header template, re-test the mobile menu, including Swiper mode, at the exact breakpoint set in Open Mobile Menu after every change.
Swiper panel appears empty. This is a source-verified likely cause, not a logged support ticket: if Menu Content is set to Normal Menu but no menu is chosen in Select Menu, or it is set to Template Menu but no item is chosen in Elementor Templates, the panel renders with nothing inside it. Confirm a real menu or template is selected under Menu Content.
Desktop menu still shows at mobile widths. Also source-verified rather than from a support ticket: if Responsive Mobile Menu is off, or your theme applies its own mobile breakpoint that does not match the Open Mobile Menu value (991px by default), the desktop menu and the swiper panel can appear to conflict. Align the Open Mobile Menu value with your theme’s actual mobile breakpoint.
