Are you looking to add a swiper mobile menu to your Elementor website? If you have lots of menu items on mobile then the swiper menu is a perfect option.
With the Mobile Menu widget from The Plus Addons for Elementor, you can easily make a swiper mobile menu on your Elementor website.
To check the complete feature overview documentation of The Plus Addons for Elementor Mobile 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 Swiper display mode in the Mobile Menu widget’s Extra Options turns your mobile menu items into a horizontally swipeable strip instead of a fixed row, so visitors flick left and right through menu items that would otherwise overflow the screen.
Why It Matters
Mobile screens are narrow, and menus with many items either wrap awkwardly, get cut off, or force tiny unreadable text. A swipe-based menu keeps every item at full readable size while letting the visitor navigate through them with a natural mobile gesture, avoiding both problems at once.
What You Get
- A Display setting under Extra Options with two modes: Swiper and Columns.
- An adjustable “Open Mobile Menu” breakpoint slider so the swiper menu only activates on real mobile widths.
- An optional Active Page Indicator, in Line or Dot style, showing which item/slide is currently active.
- Full styling control over the icon/image and its normal vs. active states.
Benefits
- Fits large menus into small screens without shrinking text or wrapping to multiple rows.
- The swipe gesture matches how mobile visitors already browse carousels and stories, so there’s no learning curve.
- The Active Page Indicator gives visitors a visual cue for how many items remain and where they are in the menu.
Capabilities
- Display – switch between Swiper (swipeable strip) and Columns (fixed grid) layouts.
- Open Mobile Menu – a pixel-based slider (0–1500px) that sets the screen width below which the menu activates.
- Active Page Indicator – toggle it on/off, then choose Line or Dot style; the Line style adds a further Top/Bottom position choice.
- Pin Text Overflow – control whether overflowing pin text on menu items is hidden or visible.
How It Works
Menu items added in the Menu 1 repeater are rendered inside a swipeable track once Display is set to Swiper. The Open Mobile Menu slider controls the breakpoint at which this mobile behavior takes over from the desktop menu, and the Active Page Indicator, if enabled, tracks which item is currently in view as the visitor swipes.
How to Use It
To do this, add the Mobile 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 Style section, select Style 1.
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 Menu 1 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 dropdown.
Now you’ll see a beautiful swiper mobile menu which users can swipe left and right to navigate the menu.
Use Cases
- Restaurant or catalog sites with long category menus that don’t fit a standard mobile dropdown.
- Multi-brand or multi-location sites where each swipeable item links to a different store/location page.
- Portfolio or agency sites wanting a distinctive, gesture-driven mobile nav instead of a standard hamburger list.
Limitations
- Swiper mode only activates below the screen width set in Open Mobile Menu; above that breakpoint, the widget falls back to normal desktop rendering, so the breakpoint must be set deliberately.
- The Active Page Indicator’s Top/Bottom position option is only available when the indicator style is set to Line, it does not apply to the Dot style.
- Swiper and Columns display modes are mutually exclusive, you cannot show both layouts at once.
Troubleshooting
No FluentSupport tickets specifically describing Swiper-display failures were found in the sample pulled this run; the issues below are drawn from real Mobile Menu widget tickets covering closely related off-canvas/positioning behavior, and are disclosed here as source-inferred rather than swiper-specific ticket evidence.
- Swiper menu items overlap or misalign after custom header CSS. A related case (ticket #22079) showed a mobile menu’s positioning breaking after custom header CSS was added; check for conflicting custom CSS on the header/menu wrapper if swipe items overlap.
- Menu items don’t render fully on first load. Ticket #21475 reported an off-canvas mobile menu needing a page refresh before all items displayed; if items are missing from the swipe strip, try a hard refresh and clear page cache.
- Swiper direction feels reversed or menu looks too narrow. Ticket #20889 reported a narrow menu width tied to an RTL setup; if the swipe menu appears cramped, verify your site’s RTL/LTR direction and the Content Width/breakpoint settings.
Also, read How to Create a Popup Mobile Menu with Elementor Template.
