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