Component: "super navigation" mega-menu-style component

[khawkins98]

In #1621 and #1622 as well as the VF July sprint, our investigations pointed to the need for a mega-menu-style component.

This component would allow navigation items to be clicked on and insert/show a horizontal container.

Standard questions

• In a few words, what does this component look like?

  

• In a few words, what does this component do? Show horizontal-containers, primarily for navigation. There is a conceptual overlap with vf-tabs and vf-dropdown.

• Would a rebrand change the structure or layout of this component? Not likely.

• Can other websites use this component? Or is it only useful in your organisation or website? Others could use

• Do you have any designs or concepts? @cindyebi is working on them

• Have you done any user testing already? no

• How often do you expect to make use of this component? Most pages would have one, coming from the global page template.

• Can you list out major elements in this component?

  • clickable item
  • revealed container

• Will all elements of this component be used every time? Generally yes

• Does this component contain other components? Uncertain

• Do you already have a component? @nitinja is working on a barebones example

Any further thoughts?

While the UX and design guidance will say how this component should be used, in principle it could be used to show any container.

A few practical questions:

1. Does the revealed content appear "over" the existing content, or push content down?
2. Could we reuse vf-tabs somehow?
3. The JS could attach to any element to show any element

[nitinja]

Hi, note that till we make any ux prototype, I am following UK gov megamenu as a n example implementation https://www.gov.uk/government/organisations

[cindyebi]

2-level navigation hierarchy:

3-level navigation hierarchy:

Search:

Notes: • We discussed this morning about combining the 2 and 3 hierarchy levels within the menu. If we decided to use the section header layout, let's keep it consistent for all menu items to use the same. • Navigation item that has an expandable [mega] menu will have a caret icon next to the label as a signifier. The caret icon will state the available user action, e.g. pointing down when the menu is closed and pointing up when the menu is opened. • Mega menu items will be displayed in blue to signify clickable links.

[khawkins98]

I'm thinking about that green line, which also exists similarly on the top of vf-footer. Thinking it could be componentised as a vf-divider--enclosure or something like that.

[khawkins98]

Technical thoughts on the caret in the navigation, this could be appended by CSS with something like:

.vf-megamenu.vf-megamenu__activated .vf-navigation__link.vf-megamenu__item--has-section

[khawkins98]

The menu entries could be .vf-mega-menu__toggle

And the megamenu that activates could be .vf-mega-menu__section

[nitinja]

@khawkins98 thanks, I am thinking something similar

[cindyebi]

I added an overlay so when the mega menu is active, it is in focus. Unless the mega menu is covering up the entire page, we don't need the overlay.

[cindyebi]

Mockup on how it looks like on the COVID-19 data portal:

[OliveiraCs]

Mockups EMBL-EBI Corporate site: IA to be reviewed( in progress)

[cindyebi]

Mobile version: • Homepage: instead of using a hamburger menu, it is recommended to use the label "Menu" for better discoverability. It's also adopted by the gov.uk site.

• Search is separate from the main Menu and once expanded uses the vf-search-mini component that was designed specifically for mobile or small screen sizes.

Menu - Expanded: shows the first level navigation menus using an accordion or similar to the vf-details component. Menu options are labeled in link blue to signify clickability.

Menu - Expanded 2 v1: shows the second level navigation menus with slight indentation to have a better visual distinction between each hierarchy.

Menu - Expanded 2 v2: shows the second and third level navigation menus with scrolling behaviour to reveal the rest of the menu.