MenuItem

An actionable 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	false	When true, the menu item is checked
disabled	boolean	false	When true, the menu item is disabled
role	MenuItemRole	''	The role of the menu item
text	string \| undefined	undefined	The text of the menu item
value	string	''	The value uniquely identifying this menu item within the menu hierarchy
variant	string	''	Additional class names to apply

Event Name	Data	Comment
close	{ value: string }	Raised when the menu item is closed
open	{ value: string }	Raised when the menu item is opened
select	{ value: string }	Raised when the menu item is selected

Types

	Type Name	Definition	Comment
	MenuItemRole	'menuitem' \| 'menuitemcheckbox' \| 'menuitemradio'	Used for the MenuItem role property.

Considerations

MenuItem uses MenuItemContext set by the Menu for some properties and events.
Includes HTMLButtonElement props, event, and methods

Anatomy

<button class="sterling-menu-item">
  <div class="item">
    <slot
      name="item"
      {checked}
      {depth}
      {disabled}
      {hasChildren}
      {isMenuBarItem}
      {open}
      {role}
      {text}
      {value}
      {variant}
    >
      <MenuItemDisplay>{text}</MenuItemDisplay>
    </slot>
  </div>
  <Popover>
    <Menu>
      <slot {depth} {disabled} />
    </Menu>
  </Popover>
</button>