MenuButton

A button that opens and closes a menu.

Code

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

<MenuButton>
  <!-- button content -->
  {#snippet items()}
    <!-- <MenuItem> ... -->
  {/snippet}
</MenuButton>

Members

Property Name	Type	Default	Comment
items	Snippet \| undefined	undefined	The items to display in the menu.
menuClass	string	''	Additional class names to apply to the menu.
open	boolean	false	When true, the menu is open.
onClose	(value: string) => void		Called when the menu or a descendant menu is closed.
onOpen	(value: string) => void		Called when the menu or a descendant menu is opened.
onSelect	(value: string) => void		Called when a descendant a menu item is selected.
popoverPlacement	PopoverPlacement	bottom-start	The placement of the menu relative to the button.
value	string	undefined	The value uniquely identifying this menu button as the root of the menu hierarchy.

Considerations

Includes Button props, events, and methods.
Includes HTMLButtonElement props, events, and methods.

Anatomy

button (<Button>)
  reference (<div>)
    children (Snippet)
  popover (<Popover>)
    menu (<Menu>)
      items (Snippet)