[Masthead]: Add a logic that highlights the current and parent menu items within the Masthead dropdown + Mega Menu based on the URL

The problem

• The current dds-masthead-container component does not have a logic in place that highlights the current and parent menu items according to the current URL of the page.
• There’s a style in place for the active state, however, this attribute should be updated/applied in the shadow Dom where we’re rendering the menu items.
• As part of the Unified Cloud Masthead + Megamenu project, we’d like to ensure that users understand where within the page that are on especially when you’re navigating 2 to 3 levels down.

Example

Purposed solution

• Add a script that executes and compares the href of each menu link to the current page URL starting after the domain name and assigns the correct active styling to the appropriate menu item.
• I know that this request might be a bit tricky, so I’m open to suggestions.

[RobertaJHahn]

All linked issues are closed.

[shixiedesign]

Summarizing the decisions in a bit more visual format. Notice the difference between desktop & mobile usage of selected state styles: