Skip to main content
Login Join
Snippet · JavaScript

Toggle Mobile Navigation

Shared by Hiral solanki · September 17, 2026

3 views
1 upvote
Back to Snippets

Creates an accessible mobile navigation toggle using aria-expanded and a CSS class, making it suitable for custom WordPress themes.

document.addEventListener('DOMContentLoaded', function () {
    const toggle = document.querySelector('.menu-toggle');
    const menu = document.querySelector('.mobile-menu');

    if (!toggle || !menu) {
        return;
    }

    toggle.addEventListener('click', function () {
        const isOpen = toggle.getAttribute('aria-expanded') === 'true';

        toggle.setAttribute('aria-expanded', String(!isOpen));
        menu.classList.toggle('is-open', !isOpen);
    });
});
Know a different way to do this? Add your approach as a variation so folks can compare them side by side.
Submit a variation

0 comments