## Background
Currently the menu component can only be triggered by a Select or Lookup component. We want to expand this to include the ability to trigger a menu with a button.
{F49489018}
### Known use cases
- The Catalog Table in the metrics platform will need this capability
- Multi-blocks project
### Existing implementations
Wikifunctions currently triggers a menu through a button, see under "Try this function": https://www.wikifunctions.org/view/en/Z10012
{F49489447}
---
## Codex implementation
- Should be implemented as a new standalone "MenuButton" component. This component will be built on top of the ToggleButton (in "quiet" state) and will use the existing Menu component for its menu, similar to other menu-based components (Select, ComboBox, etc).
- Will be introduced as a WIP component initially
- May need to expose props to accept [[ https://doc.wikimedia.org/codex/latest/components/types-and-constants.html#menuconfig | MenuConfig ]] and/or [[ https://doc.wikimedia.org/codex/latest/components/types-and-constants.html#menuitemdata | MenuItemData ]] objects
- [[ https://doc.wikimedia.org/codex/latest/composables/demos/use-floating-menu.html | useFloatingMenu ]] composable should be used for positioning the fly-out menu; however, some tweaks may be needed because we don't want the width of the menu to be limited to the width of the triggering button. The composable may need to be updated to accept an additional argument for this usage. See how Select or Combobox use the composable to position their own Menus for examples.
- Should follow guidelines for the [[ https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ | Menu Button Pattern ]] from the Aria Authoring Practices Guide as closely as possible
### Open questions
- //List any current open questions here//
### Design spec
// Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below. //
| Component spec sheet |
### Component's Guidelines
// Once the guidelines of this component have been documented, link them here. //
| Guidelines documentation |
## Acceptance criteria
- [ ] A new MenuButton conforming to the above implementation has been added as a WIP component (not published yet).
- [ ] A basic demo for the MenuButton has been added to the Codex sandbox page
- [ ] Basic unit tests for the component have been added (more comprehensive ones can be added later)
- [ ] (optional) If time allows, a page in the docs site can be added as well, but this is not a requirement.
### Minimum viable product
TBD
**MVP scope**
- [] //List all parts of the MVP scope for this component//
**Design**
- [] Design the Figma spec sheet and add a link to it in this task
- [] Include the main component in the [Figma library](https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/%E2%9D%96-Codex-components?node-id=1891%3A4420&viewport=287%2C338%2C0.28). //This step will be done by a DST member.//
- [] Document the component Guidelines and include them in Codex
**Code**
- [] Implement the component in Codex