[feature]: Basic desktop improvements for Venia - Mega Menu

[ericerway]

No description provided.

[m2-assistant]

Hi @ericerway. Thank you for your report.
To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[ericerway]

Minor updates to the design/spec added. 👍

[huykon]

@ericerway I have seen the Women category (highest level) have 5 sub-categories are: What's New, Bottom, Tops, Outerwear, Accessories. If that have more than 5 sub-categories, what the next sub-category will show on?

[schensley]

@huykon Great question! Ideally the area allowed for the menu items would be constructed in such a way that it would allow for that area to stretch to match the full-width of the header (here maxed at 1440px), this might allow for an additional column, BUT of course there may be merchants who have many sub-categories in which case there should be allowed to stack -- this would also be necessary when the screen size doesn't accommodate this optimal and orderly layout. In practical application the mega-menu will require some frontend design finesse to arrange columns and stacked sub-categories to provide a well organized and visually appealing layout.

[Frodigo]

@magento I am working on this

[Frodigo]

@ericerway I have one question. Take a look at the attached screenshot:

I suppose that "Women" is an active category name, but I don't understand from the 'Clothing' phrase came from.

[schensley]

Hi @Frodigo I think that is simply meant to be a reference label for reenforce which category was tapped in the navigation, and the designer might have taken some liberties adding "clothing" to give it greater separation in terms of hierarchy. I suppose it could serve as a breadcrumb which could be handy if this menu were to appear as an entire page where instead of "Clothing" it led with "Home" or something.

[sirugh]

@schensley could we just say that for this iteration we dont include the breadcrumb/thing at the top as indicated? Just want to provide clear instructions for @Frodigo .

[Frodigo]

@schensley @sirugh I think that we can include this breadcrumb here. I can use the root category name as the first breadcrumb item and the hovered first-level category name as the second breadcrumb item.

Please confirm that it is OK for you.

Thanks,
Marcin

[sirugh]

@magento export issue to Jira project PWA as Story

[magento-engcom-team]

✅ Jira issue (https://jira.corp.magento.com/browse/PWA-1285) is successfully created for this issue.

[schensley]

@Frodigo I just had a look at the mega menu work you did and while it was designed pretty much to the UI design provided, I think there are some tweaks that should be made.

• Let's discard the breadcrumb text. Initially I thought it might help provide better context, but it seems to add noise and maybe some confusion. We'll allow the underline in the Main Nav list to help the shopper know what category they are looking at.
• Since in this instance there are not sub-categories in the list I suppose the categories (ex. Belts, Jewelry, Scarves) are acting as those headings, so let's have those be "semi-bold" or match the weight in the categories as they appear in the Main Nav list. If there were sub-categories beneath these cat. headings in the menu then they would assume a Regular weight.
• Finally, let's ensure that items (group of columns) alignment is centered to the width of the Main Nav list. I realize with only two or three categories it can look a little "ragged", so maybe it already is aligned.

Attaching some visuals. Sorry for the tweaks, but after seeing the good work you've done I think some of the original direction was misguided. Thanks!

[Frodigo]

Hey, @schensley thanks for your feedback! I'll add changes soon.

[schensley]

@Frodigo thank you, sir.

[Frodigo]

@schensley I added changes based on your comments and updated PR.

[schensley]

Thank you @Frodigo I think things are looking much cleaner.
The second sample you provided reveals something. The spacing between categories should be greater to more easily differentiate where one category title ends and the next one begins. Maybe increasing that minimum space to ~32px to 40px, room to span from the left edge of the logo to the right edge of the basket icon in the header, then wrap if it exceeds the space, again allowing enough padding between them that it's clear they are distinct. Thanks.

[Frodigo]

Hey @schensley, I added final adjustments.

[schensley]

@Frodigo excellent. Thank you! UI/UX approved.