Title: Valbar Accessible Menu Widget for Elementor Author: valentynabaranova Published: July 10, 2026 Last modified: July 10, 2026 --- Search plugins ![](https://ps.w.org/valbar-accessible-menu-for-elementor/assets/banner-772x250. png?rev=3602508) ![](https://ps.w.org/valbar-accessible-menu-for-elementor/assets/icon-256x256.png? rev=3602508) # Valbar Accessible Menu Widget for Elementor By [valentynabaranova](https://profiles.wordpress.org/valentynabaranova/) [Download](https://downloads.wordpress.org/plugin/valbar-accessible-menu-for-elementor.zip) * [Details](https://wordpress.org/plugins/valbar-accessible-menu-for-elementor/#description) * [Reviews](https://wordpress.org/plugins/valbar-accessible-menu-for-elementor/#reviews) * [Installation](https://wordpress.org/plugins/valbar-accessible-menu-for-elementor/#installation) * [Development](https://wordpress.org/plugins/valbar-accessible-menu-for-elementor/#developers) [Support](https://wordpress.org/support/plugin/valbar-accessible-menu-for-elementor/) ## 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`, and ` Escape` to 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 [⌊Horizontal desktop menu with hover dropdowns.⌉⌊Horizontal desktop menu with hover dropdowns.⌉[ Horizontal desktop menu with hover dropdowns. [⌊Fullscreen mobile burger overlay with collapsible submenus.⌉⌊Fullscreen mobile burger overlay with collapsible submenus.⌉[ Fullscreen mobile burger overlay with collapsible submenus. [⌊Vertical layout used in a footer.⌉⌊Vertical layout used in a footer.⌉[ Vertical layout used in a footer. [⌊Style controls in the Elementor editor.⌉⌊Style controls in the Elementor editor .⌉[ Style controls in the Elementor editor. [[ ## Installation 1. Make sure [Elementor](https://wordpress.org/plugins/elementor/) is installed and active. 2. 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**. 3. Activate **Valbar Accessible Menu Widget for Elementor**. 4. Create at least one menu under **Appearance Menus**. 5. 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. ### Which menu does it display? Any menu you create under **Appearance Menus**. You select the menu from a dropdown inside the widget. ### Can I use it in a footer? 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. ### Can I add icons to menu items? 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. ### Is the mobile menu accessible? Yes. The burger button uses `aria-expanded`, `aria-controls`, and an `aria-label`, the navigation has an `aria-label`, the overlay can be closed with the `Escape` key, 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 (`BREAKPOINT` constant). 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 * [ valentynabaranova ](https://profiles.wordpress.org/valentynabaranova/) [Translate “Valbar Accessible Menu Widget for Elementor” into your language.](https://translate.wordpress.org/projects/wp-plugins/valbar-accessible-menu-for-elementor) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/valbar-accessible-menu-for-elementor/), check out the [SVN repository](https://plugins.svn.wordpress.org/valbar-accessible-menu-for-elementor/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/valbar-accessible-menu-for-elementor/) by [RSS](https://plugins.trac.wordpress.org/log/valbar-accessible-menu-for-elementor/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.0.4 * Improved active/current menu item styling for dropdown links. * Minor style control refinements. #### 1.0.0 * Initial release. ## Meta * Version **1.0.4** * Last updated **13 hours ago** * Active installations **Fewer than 10** * WordPress version ** 5.8 or higher ** * Tested up to **7.0.1** * PHP version ** 7.4 or higher ** * Tags * [elementor](https://wordpress.org/plugins/tags/elementor/)[menu](https://wordpress.org/plugins/tags/menu/) [mobile menu](https://wordpress.org/plugins/tags/mobile-menu/)[navigation](https://wordpress.org/plugins/tags/navigation/) [responsive menu](https://wordpress.org/plugins/tags/responsive-menu/) * [Advanced View](https://wordpress.org/plugins/valbar-accessible-menu-for-elementor/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/valbar-accessible-menu-for-elementor/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/valbar-accessible-menu-for-elementor/reviews/) ## Contributors * [ valentynabaranova ](https://profiles.wordpress.org/valentynabaranova/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/valbar-accessible-menu-for-elementor/)