Creating a navigation menu 'component' - after researching some examples, I noticed that many of them utilize controllers and JavaScript to dynamically include a .current (active-like class). One example is the navigation bar on https://www.google.com/analytics/, which follows this approach. I always assumed that this functionality was handled by the browser itself. Initially, I thought it might be limited in terms of elements, but according to the MDN documentation, this is not the case.
The :active CSS pseudo-class is triggered when an element is being activated by the user. This allows the page to provide feedback that the activation has been recognized by the browser. This pseudo-class is commonly used with
<a>and<button>HTML elements, but its application is not restricted solely to those.
Pseudo-class vs. class: one key distinction is that using a pseudo-class adds a different level of styling compared to using a standard class. However, I am unsure about the limitations of relying solely on the pseudo-class for styling purposes.
Currently, my implementation depends on the pseudo-class and the browser adding it automatically. For instance, using main-nav a:active, a:focus, etc. But I anticipate that at some point, I may need to revise or adjust this setup.