Uswds: Extended header with mega menu > additional link to landing page

[mariamarrero]

UI Component: [Header]: Extended header with mega menu

USA.gov & GobiernoUSA.gov are using the WDS header and we would like to share our need and a possible solution in case other folks have come across it as well.

Currently, tabs named "Section Tittle" only allow users to open and close the mega menu to show other links to pages under that section, which is very clear and easy to use. However, in our case, the actual link to that Section needs to be there. Therefore, we have decided to add a link to the landing page with the same name as the tab in the mega menu and style it differently than other "Page title" links. Also, since the amount of links under each tab in our sites vary, we have decided to add this one link in a new row, below all "Page title" links and left aligned so that its location can be consistent across all menus.

The attachment reflects a possible solution and one we will be implementing in our sites soon.

Have you come across another requests similar to this one? if so, would you consider adding this to future iterations of the standards? and
Was there a particular reason why you did not make the link to a landing page (Section Title) and a documentation page (Page Title) different? Just trying to learn more your decision making process.

Thanks for any feedback you can provide!
Maria

[juliaelman]

@mariamarrero thank you for writing this up and giving us some possible solution ideas to think about. The rationale for the "Section Title" not being linked to a page is because the click event is captured to activate the actual dropdown. Therefore we'd want to re-think how we do a dropdown overall and when that gets activated (e.g. onHover).

I am going to pass this over to our UX Lead @bradnunnally to review the pattern you've presented as a possible solution and provide further feedback.

[bradnunnally]

This is a really creative solution to the problem. I recall that the reason why the OnClick behavior is present on the mega menu is for accessibility and mobile issues that pop up when using OnHover.

The one thing I'd be interested in testing with users is the visual weight of the proposed button/link. However, this solution makes sense (and is akin to stuff i've tried in the past with other mega menus) and is something we should try to incorporate as an alternative implementation of the mega menu.

@mariamarrero @juliaelman

[thisisdano]

Thanks for contributing to USWDS. Unfortunately, this issue is not on our current product roadmap.