consul

History

Chris Hut a6c990c6fe Cc 5545: Upgrade HDS packages and modifiers (#19226 ) * Upgrade @hashicorp/design-system-tokens to 1.9.0 * Upgrade @hashicorp/design-system-components to 1.8.1 * Upgrade @hashicorp/design-system-components and ember-in-viewport * Explicitly install ember-modifier@4.1.0 * rename copy-button * Fix how cleanup is done in with-copyable * Update aria-menu modifier for new structure * Update css-prop modifier to new structure * Convert did-upsert to regular class modifier * Update notification modifier for new structure * Update on-oustside modifier for new structure * Move destroy handler registration in with-copyable * Update style modifier for new structure * Update validate modifier for new structure * Guard against setting on destroyed object * Upgrade @hashicorp/design-system-components to 2.14.1 * Remove debugger * Guard against null in aria-menu * Fix undefined hash in validate addon * Upgrade ember-on-resize-modifier * Fix copy button import, missing import and array destructuring --------- Co-authored-by: wenincode <tyler.wendlandt@hashicorp.com>		2023-10-17 07:27:42 -06:00
..
action	[COMPLIANCE] License changes (#18443 )	2023-08-11 09:12:13 -04:00
item	[COMPLIANCE] License changes (#18443 )	2023-08-11 09:12:13 -04:00
separator	[COMPLIANCE] License changes (#18443 )	2023-08-11 09:12:13 -04:00
README.mdx	ui: aria-menu modifier (#12262 )	2022-02-09 09:47:45 +00:00
index.hbs	Cc 5545: Upgrade HDS packages and modifiers (#19226 )	2023-10-17 07:27:42 -06:00

README.mdx

# Menu

A component use for menu systems with the correct aria attributes applied.
Internally uses our `{{aria-menu}}` modifier for aria keyboarding.

Additionally it is made to work in tandem with the `<Disclosure />` component if
required (a relatively common usecase)

This component should not be used for top site navigation, but it should be used
for menus within the top site navigation for choosing options, for example
choosing a namespace or partition etc.

```hbs preview-template
<Menu as |menu|>
  <menu.Item>
    <menu.Action>Item 1</menu.Action>
  </menu.Item>
  <menu.Separator />
  <menu.Item>
    <menu.Action>Item 2</menu.Action>
  </menu.Item>
  <menu.Separator>
    Title
  </menu.Separator>
  <menu.Item>
    <menu.Action>Item 3</menu.Action>
  </menu.Item>
</Menu>
```

## Arguments

| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `disclosure` | `DisclosureInterface` | | An object with following the `<Disclosure />` components API. When used no other arguments are necessary |
| `onclose` | `function` | | A function to call when a menu close is requested |
| `event` | `Event` | | A potential event used to open the menu |

## Exported API

| Name | Type | Description |
| --- | --- | --- |
| `Item` | `GlimmerComponent` | A component for adding a menu item with aria attributes correctly applied |
| `Separator` | `GlimmerComponent` | A component to be used for separating sections in the menu with aria attributes correctly applied. When used as block component you can add some sort of testual title to the separator |
| `Action` | `GlimmerComponent` | A contextual '<Action />' component with aria attributes correctly applied |


## See

- [Template Source Code](./index.hbs)

---