Valbar Accessible Menu Widget for Elementor
·
A lightweight Elementor widget that turns any WordPress menu into an accessible responsive navigation with a fullscreen mobile burger.
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