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:
- Products
- Active State Test
- About Us
Different Active Class:
- Products
- Solutions
- About Us
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: