Theme: All Menu Items Not Showing on Desktop Tab Menu

[ravichdev]

Issue by ravichdev Thursday Mar 25, 2021 at 18:42 GMT Originally opened as https://github.com/xwp/material-design-wp-plugin/issues/571

---

Feature description

The tab menu on desktop renders only limited menu items and the items exceeding the limit are always hidden and cannot be viewed or focused.

https://wordpress.org/support/topic/all-menu-items-not-showing-on-desktop-tabs/

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

1. When a user adds more than 4 menu items present a warning message: "Too many menu items may require scrolling."
2. Add to Appearance>Menu
3. Add to customizer
4. On the front end on desktop, provide a visual indicator that more tabs are available off screen.
5. On the front end on mobile and desktop, offset the first tab on the left to signal that tabs are scrollable.

See https://material.io/components/tabs#scrollable-tabs

4

5

Implementation brief

QA testing instructions

Demo

Changelog entry

[jauyong]

@rodydavis what are your thoughts on adding a visual indicator on the menu to let the user know they can scroll to see more?

[rodydavis]

I think that we should stick to the material guidance here. What do other solutions do for long menus?

[jauyong]

@jauyong to verify if this bug is still outstanding (scrolling on desktop)

[jauyong]

I have verified that you are able to scroll on desktop so the bug is essentially closed. We can however still implement the AC to improve UX when there are too many tabs to display and scrolling is required.