search

material-components / material-design-for-wordpress

Material Design plugin for WordPress
78 stars 22 forks source link

Theme: All Menu Items Not Showing on Desktop Tab Menu #84

Open ravichdev opened 3 years ago

ravichdev commented 3 years ago

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

image

5

image

Implementation brief

QA testing instructions

Demo

Changelog entry

jauyong commented 3 years ago

@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 commented 3 years ago

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

jauyong commented 3 years ago

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

jauyong commented 3 years ago

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.