MenuItem

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

Types

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

Considerations

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>
  <Popover>
    <Menu>
      {@render menu()}
    </Menu>
  </Popover>
</button>