MenuButton

A <Button> that opens/closes a <Menu>

Code

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

<MenuButton>
  <!-- <MenuItem> ... -->
</MenuButton>

Members

Property Name	Type	Default	Comment
open	string	false	When true, the menu is open
menuVariant	string	''	Additional class names to apply to the Menu
value	string	''	The value uniquely identifying this menu button as the root of the menu hierarchy
variant	string	''	Additional class names to apply

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

Considerations

Includes Button props, event, and methods
Includes HTMLButtonElement props, event, and methods

Anatomy

<Button>
  <div class="reference">
    <slot {open} {value} {variant} />
  </div>
  <Popover>
    <Menu variant={menuVariant}>
      <slot name="items" />
    </Menu>
  </Popover>
</Button>