=== Description
There are many navigational menus in the Wikimedia interfaces. Some of the most prominent navigational menus are:
- language switching menu
- search menu
- user menu
- main menu
Navigational menus usually consist of two parts: 1) the menu trigger/handle (i.e. the thing you click on to open the menu), 2) the menu links/items (i.e. the things inside of the menu). This task is specifically about //the styling of the menu links/items//. (Also note: select menus are a different type of menu)
The links/items inside navigational menus are links (both from a user experience perspective, and from a technical perspective). Currently these links/items are sometimes styled in black, and sometimes styled in blue. For example:
| blue menu links/items | black menu links/items
| {F35269020} language menu | {F35269023} user menu
| {F35269024} main menu | {F35269025} search menu
=== Proposal
We should style navigational menu links/items as we style other links: in blue. The reasons are:
- this sets clearer expectations for people using navigational menus
- in the case of a navigational menu with headings it makes the links/items easier to distinguish from the headings
- this simplified our interfaces from a design and code perspective by reducing the styling of links to one styling
- this allows easier scanning of navigational menus in cases where the links/items have subtext (like the descriptions in the search menu)
- this is aesthetically more aligned with our minimalist approach (i.e. less CSS)
Prototype: https://di-visual-design-menus.web.app/Zebra
(using the options panel in the bottom left corner you can toggle between option 1, which styles the navigational menu links/items in blue, and option 2, which styles them in black)
=== Examples
Examples of different types of navigational menus, with the links/items styled in blue:
| simple | with headings | with icons | with descriptions | with search input
| {F35271640} | {F35271642} | {F35271645} | {F35271647} | {F35271651}