MenuItem2

An item within a menu.

Code

<script lang="ts">
  import { MenuItem } from '@geoffcox/sterling-svelte';
</script>

<MenuItem text="sterling-svelte" value="menu-item-1">
  <!-- <MenuItem> ... -->
</MenuItem>

Members

Property Name	Type	Bindable	Default	Comment
checked	boolean \| null \| undefined	no	false	When true, the menu item is checked. Displayed only when role is set to menuitemcheckbox or menuitemradio.
item	Snippet \| undefined	no	undefined	When undefined, a default item is rendered with a chevron, checkmark, text, and shortcut.
menuClass	string \| undefined	no	undefined	A class applied to any child menu.
onClose	(value: string) => void	no	undefined	Called when the menu item is closed.
onOpen	(value: string) => void	no	undefined	Called when the menu item is opened.
onSelect	(value: string) => void	no	undefined	Called when the menu item is selected.
role	MenuItemRole \| undefined	no	'menuitem'	The role of the menu item. Allows regular, checkbox, or radio menu items.
shortcut	string \| undefined	no	undefined	The shortcut key sequence associated with the menu item. Not used if item is set.
text	string \| undefined	no	undefined	The text of the menu item. Not used if item is set.
value	string	no		Uniquely identifies the menu item within the menu hierarchy.

Types

	Type Name	Definition	Comment
	MenuItemRole	'menuitem' \| 'menuitemcheckbox' \| 'menuitemradio'

Considerations

MenuItem2 uses Popover2
Includes HTMLButtonElement props, events, and methods.

Anatomy

<button class="sterling-menu-item">
  <div class="item">
    {#if item}
      {@render item()}
    {:else}
      <div class="sterling-menu-item-display">
        <div class="check"></div>
        <div class="content"></div>
        <div class="shortcut"></div>
        <div class="chevron"></div>
      </div>
    {/if}
  </div>
  <Popover2>
    <Menu>
      {@render menu()}
    </Menu>
  </Popover2>
</button>