JavaScript: gestire i menu di navigazione evidenziando la voce corrente

In questo articolo vedremo come evidenziare la voce corrente di un menu di navigazione con JavaScript.

Si tratta sostanzialmente di verificare se l'URL della pagina corrente ha una corrispondenza nel valore dell'attributo href di un link del menu di navigazione.

class Menu {
        constructor(element) {
            this.element = element;
            if(this.element !== null) {
                this.init();
            }
        }
        init() {
            this.highlightCurrentItem();
        }

        highlightCurrentItem() {
            const selector = `a[href="${location.href}"]`;
            const item = this.element.querySelector(selector);
            if(item !== null) {
                item.classList.add('current-menu-item');
            }
        }
    }

Per gli URL relativi, invece, occorre usare l'oggetto URL con la proprietà location.href e estrarre la proprietà pathname il cui valore andrà confrontato con il valore dell'attributo href dei link di navigazione.