Page MenuHomePhabricator

[User links] [Design spike] consider adding selected state to menu items
Open, MediumPublic

Description

Discussion

Should we highlight the current page you are on, within the new user menu?

For example:
preferences page w/ menu open

image.png (762×1 px, 193 KB)

In the case where the menu is persistently displayed on the page (rather than being something you open & close), it seems rather standard to highlight the selected menu item. In this case, the menu is hidden by default, so showing the selected state seems less important. I'm unable to come up with a strong opinion one way or another...

Event Timeline

Yes, please! Big +1 for user orientation.

In OOUI we've followed a path that has been not so convincing design-wise:

image.png (454×1 px, 47 KB)

Reason was the already existing mess of separating interactive state from a chosen/selected element in menus. Also please take into account hover states here.

@Volker_E can you clarify what the current pattern is? the item background is light blue and the item icon is blue? and what is the expectation for hovering over a selected item?

While talking to @alexhollender on different menu autocompletes, AdvancedSearch revealed a list with interactive link-like results:

image.png (852×1 px, 71 KB)

LGoto triaged this task as Medium priority.Jul 12 2021, 5:15 PM

difference between a menu of page/navigational links, and a menu of options (like recent changes) where you could select more than one at a time

index of existing menus that allow for a single option to be persistently selected, broken into two categories:

  1. navigational menus, where changing the selected item navigates you to a different page
  2. options menus, where changing the selected item does not navigate you to a different page
Menus of pages
user menu
image.png (324×325 px, 16 KB)
user menu (translations dashboard)
image.png (332×253 px, 13 KB)
user menu (mobile)
image.png (336×221 px, 14 KB)
main menu
image.png (619×427 px, 66 KB)
main menu (mobile)
image.png (494×437 px, 21 KB)
Menus of options
media search
image.png (486×737 px, 78 KB)
recent changes, saved filters
image.png (129×328 px, 6 KB)
flow, topic selector
image.png (451×922 px, 42 KB)
what links here, namespace selector
image.png (458×624 px, 78 KB)
visual editor
image.png (242×282 px, 12 KB)
visual editor
image.png (492×263 px, 29 KB)