Join the Webstudio community

Updated 2 months ago

Make ‘Current Page’ available as a class and/or variable

At a glance

The community member is interested in being able to determine the current page from CSS or JavaScript, beyond just styling links. They suggest making the current page available as a system resource or adding a class to the body element or links that match the current page. They provide an example of how they would use this to style non-link elements associated with the current page in a navigation menu.

In the comments, other community members suggest using the aria-current="page" attribute on links to indicate the current page, and mention that a current page flag may be available in a related issue. One community member asks if the aria-current="page" attribute is only available in the published version, and another confirms that it is only available in the published version, not the builder preview.

There is no explicitly marked answer in the comments.

Useful resources
Current Page is available for styling links within the UI. But for more complex stuff, I'd like to be able to determine the current page from CSS or JS.

Perhaps Current Page could be made available as a system Resource (to be used as a variable in an embed) and/or as a class added to <body>—or even to any link that matches the current page value?

Example use for styling non-link element associated with the current page in a nav:

Plain Text
document.addEventListener('DOMContentLoaded', function () {
    const navLinks = document.querySelectorAll('nav a');

    navLinks.forEach(link => {
      const href = link.getAttribute('href');
      if (href && href.includes(system.currentPageSlug)) { // system.currentPageSlug as a system Resource
        link.classList.add('current-page');
      }
    });
});


Plain Text
nav ul li a.current-page:before {
  /* styles */
}
O
p
7 comments
check for aria-current="page" attribute on the links
if you want to access it with js
generally current page flag def would be available in https://github.com/webstudio-is/webstudio/issues/4115
Thanks! Any chance aria-current=page could be included in the builder preview mode, to make working with it easier?
is it only in prod right now?
only in published?
yes, as far as I can tell. From a demo I shared with another issue:

ws builder
https://p-152190b5-1f6e-4105-b851-641f2959968a.apps.webstudio.is/

published:
https://nov-hover-active-tab-tf8u9.wstd.io/
Add a reply
Sign up and join the conversation on Discord