[component]: Menu

[gfellerph]

Discussed in https://github.com/swisspost/design-system/discussions/1208

^{Originally posted by gfellerph February 24, 2023} Create an action menu button. This button shows a dropdown with a list of links on click and offers various ways to browse that list.

Requirement	URL
Accessibility	https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant/
Design	https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=21-167&t=pD7d0x3Fmz7ALkgq-0
Existing implementation	Internet Header Language Switch on Desktop https://next.design-system.post.ch/?path=/story/components-internet-header-header--default (does not fulfill accessibility requirements)
Other examples	https://component.gallery/components/dropdown-menu/
Disambiguation with Select and Split Button	https://github.com/swisspost/design-system/discussions/1888

Proposed API

Following the headless-ui listbox example, a third component is used for rendering the links. This gives control over the links back to the library authors.

<post-menu-toggle>
  <button class="btn btn-primary">Trigger</button>
</post-menu-toggle>
<post-menu>
  <h3>Title</h3>
  <post-menu-item href="/">
    <post-icon name="3123" />
    Link 1
  </post-menu-item>
  <post-menu-item>Button 1</post-menu-item>
  <hr />
  <post-menu-item>Button 2</post-menu-item>
</post-menu>

• <post-menu> dropdown container that internally uses <post-popovercontainer> with role="menu"
• <post-menu-toggle> wrapper for a toggle button

Behavior

• The dropdown list should never be hidden by page boundaries. If the action menu button is placed directly at the edge of the screen, the dropdown list should adapt its alignment. Default alignment is bottom left (use post-popovercontainer)
• There might be content before or after the link list
• There might be cateogries of links or grouped link lists
• Custom <a> and <button> or other form elements for filtering/decorating are also valid descendants, <post-menu-item> has just specific styles
• Focus should move from the trigger buttons to the menu items (all focusable items in the menu) by pressing arrow keys (maybe https://github.com/gfellerph/focusgroup-polyfill could be used)
• Focus should move back to trigger when menu closes
• Escape should close the menu

Examples of possible use cases

Language switch

Breadcrumbs on mobile

Login widget