aria-current=page for GB buttons?

Hi there,

Are you adding the button links manually by typing the URL for each button yourself, or would you like the site to automatically detect when a button links to the current page and change its color automatically?

The solution will be a bit different depending on which approach you need, so let us know!

Hi there,

Just so we can point you in the right direction — could you share a link to the page where these buttons are set up?

If you’re using a group of buttons as a page navigation menu, it might be simpler to use a GenerateBlocks Pro navigation block and set the current state color. Alternatively, you could set up a secondary navigation menu (Secondary Nav module needs to be activated) and display your menu there. There are settings in the Customizer to style the secondary menu (once the Secondary Nav module is activated).

Hi there,

That makes sense — thanks for clarifying!

Here’s a small JavaScript snippet that will automatically detect when a button links to the current page and add a class to it.

First, wrap your buttons to a GB container with the class of button-nav.

Then add this to a GP Hook Element set to display site-wide using the wp_footer hook:

<script>
document.addEventListener('DOMContentLoaded', function() {
    var currentPath = window.location.pathname.replace(/\/+$/, '') || '/';
    document.querySelectorAll('.button-nav a.gb-text').forEach(function(link) {
        if (link.href) {
            var linkPath = new URL(link.href, window.location.origin).pathname.replace(/\/+$/, '') || '/';
            if (linkPath === currentPath) {
                link.classList.add('is-current-page');
            }
        }
    });
});
</script>

Then style the active button with CSS:

a.gb-text.is-current-page {
    background-color: #your-color;
    color: #fff;
}

The script compares each link’s URL to the current page URL, and when they match it adds the is-current-page class. Just adjust the colors to suit your design.

Let us know how that goes!

Hello,

As you haven’t provided a URL so that we can have a look, would you be able to inspect the button and adjust the selector in the code provided? If not, please provide a URL so that we can have a look.

Great, good to know!