Magellan setting is-active class on A element

I am trying to get Magellan to work, but a bit confused on why the is-active class is applied to the A element rather than the parent LI element.

I have this CodePen where Magellan is setting the is-active class on the A element. That all seems fine, but I have always set the parent LI to is-active, and that is how menus are documented to work. So a bit confused. Magellan does smooth scroll when you click on the menu items, so it seems to be working, but the CSS is not highlighting the menu item.

I created this CodePen as a plain menu and set the A element to is-active class (using 6.5 css). It also does not highlight the active menu item if the is-active class is applied to the A element, but does when you apply it to the parent LI, as I would expect it to.

I do see on the Foundation Docs site that Magellan seems to be working with setting the is-active class on the A element, but I don’t see how it is working. When using the same CSS from the docs, it still does not highlight the menu correctly for me. So a bit confused as to why the A element is set to is-active and not the LI element as you would expect from the documentation, but also as to why it seems to work in the Foundation docs.

Can anyone explain what is happening?


I solved this by adding an additional class selector of .menu .is-active in addition to .menu .is-active > a.

But still think this is an issue. I would think the is-active class should be applied to the containing li element, and not the a element, as this is how menus normally work. See this CodePen where the a element is set to is-active, and the menu is not highlighted. But move the is-active class to the li element, and it works.

Happy to submit a PR, but not sure of the correct solution.

And here is to a better 2021 than 2020. Happy New Year!