Content
View differences
Updated by Cameron Dutro about 1 year ago
**Overview**
Primer has concepts written down and implemented in React for a multi-level navigation with ActionMenus. We want that for our rails implementation as well
[https://primer-docs-preview.github.com/product/components/action-menu/#with-submenus](https://primer-docs-preview.github.com/product/components/action-menu/#with-submenus)
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/495518/content">
**Acceptance criteria**
* The ActionMenu supports nested sub menus
* The sub menu items support the same things as the first-level items:
* leading visuals
* dividers
* groups
* descriptions
* inactive items
* Multi-select (using a leading icon)
* The menu is usable via keyboard
* Pressing the "right" arrow key while focused on a menu item with a sub-menu should expand the sub-menu and focus on its first item (or active item, if one exists).
* Pressing the "left" arrow key while focused on a sub-menu item should collapse the sub-menu and return focus to the parent item that it expanded from.
* Pressing "Enter" on a sub-menu item should _not_ activate (i.e. click) it, but should instead expand its sub-menu.
* Using the "Up" and "Down" arrow keys should allow transferring focus to sibling items in keeping with the current `ActionMenu` behavior. Focus should transfer to sibling items within the same menu only, i.e. should not transfer to items in parent or child sub-menus.
* Focus should "wrap" to the first item when "Down" is pressed on the last item, and focus should wrap to the last item when "Up" is pressed on the first item.
* Focusing on items in the primary menu and sub-menus should only be possible via the arrow keys. Tabbing should tranfer focus out of the component entirely, in keeping with the current `ActionMenu` behavior.
* Follow their recommendations written here: [https://primer-docs-preview.github.com/product/components/action-menu/guideilnes/#multi-level](https://primer-docs-preview.github.com/product/components/action-menu/guideilnes/#multi-level)
**Potential usages**
* Create relations dropdown
Primer has concepts written down and implemented in React for a multi-level navigation with ActionMenus. We want that for our rails implementation as well
[https://primer-docs-preview.github.com/product/components/action-menu/#with-submenus](https://primer-docs-preview.github.com/product/components/action-menu/#with-submenus)
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/495518/content">
**Acceptance criteria**
* The ActionMenu supports nested sub menus
* The sub menu items support the same things as the first-level items:
* leading visuals
* dividers
* groups
* descriptions
* inactive items
* Multi-select (using a leading icon)
* The menu is usable via keyboard
* Pressing the "right" arrow key while focused on a menu item with a sub-menu should expand the sub-menu and focus on its first item (or active item, if one exists).
* Pressing the "left" arrow key while focused on a sub-menu item should collapse the sub-menu and return focus to the parent item that it expanded from.
* Pressing "Enter" on a sub-menu item should _not_ activate (i.e. click) it, but should instead expand its sub-menu.
* Using the "Up" and "Down" arrow keys should allow transferring focus to sibling items in keeping with the current `ActionMenu` behavior. Focus should transfer to sibling items within the same menu only, i.e. should not transfer to items in parent or child sub-menus.
* Focus should "wrap" to the first item when "Down" is pressed on the last item, and focus should wrap to the last item when "Up" is pressed on the first item.
* Focusing on items in the primary menu and sub-menus should only be possible via the arrow keys. Tabbing should tranfer focus out of the component entirely, in keeping with the current `ActionMenu` behavior.
**Potential usages**
* Create relations dropdown