Discussion: navigation drop-down menus

[khawkins98]

Moving ticket #1148 here.

• Should the VF support drop-down menus?
• Are they best UX practice?
• What should they look like?
• Do we only have "menu bar-style" dropdowns? Or do we also have mega menu dropdowns?

---

Original issue from @gabsie:

Hi, Ken and Stu

I have a request with respect to: Top nav and a sub-nav! See answers to your questions below.
Thank you!

Standard questions

• In a few words, what does this component look like?
  We will need to bring some sort of organisation of the top navigation on the COVID-19 Data portal.

• In a few words, what does this component do?
  The goal with this navigation is to allow users to browse content which is other than data, i.e. find about about who is behind this project, contact, collaborate, participate. (About/Contacts/Partners, etc)
  However, while I haven't been looking this summer, people have added all kinds of other content in that space, because they didn't know where else, and it looks untidy and disorganised.

• Would a rebrand change the structure or layout of this component?
  I don't think so..

• Can other websites use this component? Or is it only useful in your organisation or website?
  The Covid portal is quite different at the moment, but maybe similar different websites might need a subnavigation to top nav?

• Do you have any designs or concepts?
  Yes, attached!

• Have you done any user testing already?
  No, for the moment I am trying to organise content based on theme and what is already out there.

• How often do you expect to make use of this component?
  Not sure.

Any further thoughts?

So I have suggested the attached for now, but would welcome please your advice and feedback, as well as ways we can possibly make this in an alternate way? Would love your professional design help.

I see that top nav functioning in a way similar to https://www.figma.com/ - and those bullets for hierarchy in my suggestion can be ignored, actually. Also - colours/fonts/etc - I will leave those decisions to you, and consider this just a black/white suggestion

[khawkins98]

FYI @sandykadam

[khawkins98]

@filipe-dias is working on some notes about how we currently avoid using dropdowns, and examples

[filipe-dias]

Following up on examples of alternatives to having a submenu, which is a often a navigational and accessibility abuse.

• Depending on the existing pages structure and content, sometimes a rethinking of the pages allowed to merge and/or simplify without needing to nest pages completely.
• Using tabs or details to have more content in a page without making it too long
• Using links-list:
  a) On the sidebar for nested pages;
  b) For related pages that are meaningful to the content or in multiple pages, not having to place them in the menu;
  c) With anchors to make longer pages

a) nested pages

b) related pages

c) anchors

[sturobson]

SmashingMag have written a good post on this, and how it could be 'handled' in 2021 -- https://www.smashingmagazine.com/2021/05/frustrating-design-patterns-mega-dropdown-hover-menus/

A friend also shared what GDS are doing for 'mega menus' in 2021 too -- https://gds.blog.gov.uk/2021/05/17/our-plans-to-improve-navigation-on-gov-uk/

[khawkins98]

a lot of good thinking in those links

[cindyebi]

Following up #1643, we have decided to use a dropdown navigation on the Training project's Personal Space. A very simple design mockup is attached below:

Additionally, here's the do and don'ts from NNGroup on using dropdowns:
https://www.nngroup.com/articles/drop-down-menus/

[khawkins98]

From a development perspective, we should code the two states (open/closed) as static CSS+HTML, we can then add any JS helpers.

I think this is a good set of work for the sprint on 20 Sep.

[cindyebi]

Added a revised UI here as per Tabea's feedback:

[khawkins98]

Is there a difference between the hover and current page state? Or will they both be blue?

[cindyebi]

The mockups I provided yesterday were only showing two different versions of an active state. Currently for tables, we have blue as the selected state:

[nitinja]

Started on this issue!

[cindyebi]

An example of how Github does the dropdown menu: blue background on mouse hover and has no active state

[stefangutnick]

I think this is a good approach; having both a hover and active state seems excessive and confusing.

The component proposed in a previous comment would be a useful improvement for the portal as well, as our dropdown opens on-hover. Having on-click would be preferable.

[khawkins98]

This component has been largely made at " Component: vf-dropdown #1679 ", however the component there needs a second round of technical optimisation. Mainly to integrate the new z-index design tokens