We want to surface/show users the most important menu items that are currently hidden inside the hamburger menu

Overview

Currently we use a 'hamburger' menu which hides some useful links for food-seekers and those helping them.

We can surface the most important and useful links on devices that have the screen real estate.

This will help users get a better sense of what our site does, what they should be asking, and can help them contribute (both new listings and perhaps money or time). We can also use color and shape to draw attention.

For example:
Current:

Proposed concept:

Discussion

Due to the varying width of the screen and the number of menu items, we will still need a 'more menu options' affordance (which will probably still be a hamburger menu), but we can show the top menu items when there's space.

What to build

This is a typical hamburger menu-type thing where we want to show/surface the highest priority links on the available screen real estate, before moving those items to the hidden hamburger menu.

For example: Perhaps it’s this, in priority order:

1. About Us
2. Donate button
3. Suggest Listing
4. Contact Us
5. FAQ
6. Volunteer Login

Note that priority is different from position, so let’s make position along the top to be (left to right):
About Us, Suggest Listing, Contact Us, FAQ, Donate button, (and all the other links)

So as screen shrinks, items should move off the horizontal bar and into the hamburger menu in reverse-priority order (i.e. Volunteer Login disappears first, About Us disappears last)

Action Items

• Rank and choose the most important links to surface on the top bar. Use the above priority and order for now. The rest of the links should go to the hamburger menu as the screen shrinks.
• Review new menu implementation internally with design team (and product and researchers, if needed)
• Document and work with devs to implement
• Beta test

Related

• This is related to the 2024 redesign: Visual refresh/redesign of public Food Oasis UI #1874 — see screens there for more details