Mobile Menu Behavior: Wrap Pills vs. Drawer Menu

[madrilene]

Overview

Decide on the approach for mobile menu behavior: whether to use wrap pills or implement a drawer menu.

Task

• [ ] Discuss and decide on the preferred method for mobile menu.
• [ ] Draft a preliminary design for approval before implementation.

[tobie]

Could you give visual examples of both and summarize their respective benefits?

[madrilene]

Options

Wrap Pills

Pros

• straightforward and minimalistic approach
• enhancing user experience by keeping all options visible
• no extra action like tapping burger menu button needed to switch pages
• no JS dependency

Cons

• limits the number of items we can effectively display (should fit in one line)
• Less control over layout: Even though we limit the items, the last one may still fall to the next line on some devices

Drawer Menu

Pros

• Provides a more scalable solution for navigation with various items and subitems, keeping the mobile interface clean.

Cons

• requires JS for accessibility (This is already developed and must only be activated: https://github.com/unlockopen/www.unlockopen.com-v4/blob/main/src/assets/scripts/nav-drawer.js)
• Adds the extra step op opening the navigation drawer when switching pages

[tobie]

Let's go with the drawer menu.

[madrilene]

Built a drawer menu. Let me know if the styling works for you, and if not, what you would want to change / link to an example you like.

[tobie]

Looks good to me.

you’d want to figure out how to make scrolling scroll the menu, not the background on ios before landing, though. I remember seeing write ups about how to do this.

[madrilene]

Not sure I understand. Can you explain again? Is this an issue already? Can you tell me your iOS version so I can emulate this?

[tobie]

https://share.icloud.com/photos/030sIrH5jS_3V2uyp7sbopLmA

[tobie]

Maybe this: https://developer.chrome.com/blog/overscroll-behavior ?

[madrilene]

Ah, I see what you mean now. I'm on it.