<ahi-menu style="max-width: 200px;">
  <ahi-menu-item value="undo">Undo</ahi-menu-item>
  <ahi-menu-item value="redo">Redo</ahi-menu-item>
  <ahi-divider></ahi-divider>
  <ahi-menu-item value="cut">Cut</ahi-menu-item>
  <ahi-menu-item value="copy">Copy</ahi-menu-item>
  <ahi-menu-item value="paste">Paste</ahi-menu-item>
  <ahi-menu-item value="delete">Delete</ahi-menu-item>
</ahi-menu>

Menus are intended for system menus (dropdown menus, select menus, context menus, etc.). They should not be mistaken for navigation menus which serve a different purpose and have a different semantic meaning. If you’re building navigation, use <nav> and <a> elements instead.

Examples

In dropdowns

Menus work really well when used inside dropdowns.

Edit

Cut

Copy

Paste

<ahi-dropdown>
  <ahi-button slot="trigger" disclosure>Edit</ahi-button>
  <ahi-menu>
    <ahi-menu-item value="cut">Cut</ahi-menu-item>
    <ahi-menu-item value="copy">Copy</ahi-menu-item>
    <ahi-menu-item value="paste">Paste</ahi-menu-item>
  </ahi-menu>
</ahi-dropdown>

Submenus

To create a submenu, nest an <ahi-menu slot="submenu"> in any menu item.

Undo

Redo

Cut

Copy

Paste

Find

Find…

Find Next

Find Previous

Transformations

Make uppercase

Make lowercase

Capitalize

<ahi-menu style="max-width: 200px;">
  <ahi-menu-item value="undo">Undo</ahi-menu-item>
  <ahi-menu-item value="redo">Redo</ahi-menu-item>
  <ahi-divider></ahi-divider>
  <ahi-menu-item value="cut">Cut</ahi-menu-item>
  <ahi-menu-item value="copy">Copy</ahi-menu-item>
  <ahi-menu-item value="paste">Paste</ahi-menu-item>
  <ahi-divider></ahi-divider>
  <ahi-menu-item>
    Find
    <ahi-menu slot="submenu">
      <ahi-menu-item value="find">Find…</ahi-menu-item>
      <ahi-menu-item value="find-previous">Find Next</ahi-menu-item>
      <ahi-menu-item value="find-next">Find Previous</ahi-menu-item>
    </ahi-menu>
  </ahi-menu-item>
  <ahi-menu-item>
    Transformations
    <ahi-menu slot="submenu">
      <ahi-menu-item value="uppercase">Make uppercase</ahi-menu-item>
      <ahi-menu-item value="lowercase">Make lowercase</ahi-menu-item>
      <ahi-menu-item value="capitalize">Capitalize</ahi-menu-item>
    </ahi-menu>
  </ahi-menu-item>
</ahi-menu>

As a UX best practice, avoid using more than one level of submenus when possible.

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/menu/menu.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/menu/menu.js';

Events

Name	Description	Event Detail
`ahi-select`	Emitted when a menu item is selected.	`{ item: AhiMenuItem }`

Learn more about events.

Methods

Name	Description	Arguments
`getAllItems()`	Gets all slotted menu items, ignoring dividers, headers, and other elements.	-
`getCurrentItem()`	Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index. The menu item may or may not have focus, but for keyboard interaction purposes it’s considered the “active” item.	-
`setCurrentItem()`	Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.	`item: AhiMenuItem`

Learn more about methods.