Description
Valbar Accessible Menu Widget for Elementor adds a single, focused Elementor widget that renders any WordPress menu as a responsive navigation. On desktop you get a horizontal menu with hover dropdowns; on mobile you get an accessible fullscreen burger overlay with collapsible submenus. You can also switch to a vertical layout, which is handy for footers and sidebars.
It does one thing and does it well: no bloated all-in-one add-on pack, no build step, just clean CSS and vanilla JavaScript. Everything is configurable directly in the Elementor editor.
Key features
- Native Elementor widget under its own Valbar Accessible Menu category.
- Pick any registered WordPress menu from a dropdown.
- Horizontal layout: hover dropdowns on desktop, fullscreen burger overlay on mobile.
- Vertical layout: an always-visible stacked list with expanded submenus and no burger, ideal for footers.
- Optional per-item icon (Font Awesome or uploaded SVG) with configurable position, size, spacing, and color.
- Hover dropdowns kept open by an invisible bridge, with a configurable gap from the main menu.
- Animated burger button toggling a fullscreen mobile overlay.
- Collapsible submenus on mobile with auto-generated toggle buttons.
- Accessibility-friendly:
aria-expanded,aria-controls,aria-label, andEscapeto close. - Body scroll lock while the mobile menu is open.
- Rich style controls: link colors, typography, item spacing, dropdown styling, item icon, burger colors, and the mobile panel background.
- Live preview inside the Elementor editor.
- No build step required, plain CSS and vanilla JavaScript.
Requirements
- WordPress 5.8 or higher
- PHP 7.4 or higher
- Elementor 3.5 or higher
Screenshots
Installation
- Make sure Elementor is installed and active.
- In your WordPress admin, go to Plugins Add New and search for “Valbar Accessible Menu Widget for Elementor”, or upload the plugin ZIP via Plugins Add New Upload Plugin.
- Activate Valbar Accessible Menu Widget for Elementor.
- Create at least one menu under Appearance Menus.
- Edit a page or template with Elementor, search for Valbar Accessible Menu in the widgets panel, and drag it onto the canvas.
FAQ
-
Does this plugin require Elementor?
-
Yes. The plugin registers an Elementor widget, so Elementor must be installed and active. If Elementor is missing, the plugin shows an admin notice and does nothing else.
-
Does it work with Elementor free or only Elementor Pro?
-
It works with the free version of Elementor. Elementor Pro is not required.
-
Any menu you create under Appearance Menus. You select the menu from a dropdown inside the widget.
-
Yes. Drop the widget into a footer or any narrow column and set the Layout to Vertical. The burger is disabled, items stack into a column, and submenus are shown as an expanded, indented list.
-
Yes. You can set an optional Font Awesome icon or uploaded SVG that appears next to every top-level menu item, and control its position, size, spacing, and color.
-
Yes. The burger button uses
aria-expanded,aria-controls, and anaria-label, the navigation has anaria-label, the overlay can be closed with theEscapekey, and body scrolling is locked while the menu is open. -
Can I change the mobile breakpoint?
-
The mobile breakpoint is
1024px, defined in both the stylesheet (media query) and the script (BREAKPOINTconstant). You can adjust it with custom code or override styles using the BEM class names (rnm-menu,rnm-menu__nav,rnm-menu__burger, etc.).
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Valbar Accessible Menu Widget for Elementor” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Valbar Accessible Menu Widget for Elementor” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.4
- Improved active/current menu item styling for dropdown links.
- Minor style control refinements.
1.0.0
- Initial release.