Valbar Accessible Menu Widget for Elementor

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