Active State Test

Set data-mage-init='{ "assignActiveState": {} }' on the element wrapping the secondary menu.

By default, the active class name is "active." If you want to use a different class name, set data-mage-init='{ "assignActiveState": { "activeClass": "your-active-class" } }'.

Default Functionality:

Different Active Class:

If you want it to auto-check for href attributes that match the current URL, then set data-mage-init='{ "assignActiveState": { "autoCheckHrefs": true } }'.

Auto Check Hrefs:

By default, the active link will be disabled (i.e., when you click on it, it will not go anywhere). To style disabled active links, target the [data-disabled='true'] selector. If you want to enable the active link for a particular menu, set data-mage-init='{ "assignActiveState": { "disableActiveLink": false } }'.

Enabled Active Link:

---