MenuButton2

A button that opens and closes a menu.

Code

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

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

Members

Property Name	Type	Bindable	Default	Comment
allowFlip	Popover2FlipAxis \| undefined	no	undefined	Which axis/axes allow the menu to flip to the other side when there is not enough space.
items	Snippet \| undefined	no	undefined	The items to display in the menu.
menuClass	string	no	''	Additional class names to apply to the menu.
menuAnchorOrigin	Popover2Nonant \| undefined	no	'bottom-left'	The point in a 3x3 grid on the button that should be used as the origin.
menuPlacement	'auto'\| Popover2Nonant \| undefined	no	'bottom-right'	How the menu should be positioned relative to the anchor point. When 'auto', placement follows anchorOrigin.
open	boolean	yes	false	When true, the menu is open.
onClose	(value: string) => void	no		Called when the menu or a descendant menu is closed.
onOpen	(value: string) => void	no		Called when the menu or a descendant menu is opened.
onSelect	(value: string) => void	no		Called when a descendant menu item is selected.
value	string	no	undefined	The value uniquely identifying this menu button as the root of the menu hierarchy.

Considerations

MenuButton2 uses Popover2
Includes Button props, events, and methods.
Includes HTMLButtonElement props, events, and methods.

Anatomy

<Button class="sterling-menu-button-2">
  {@render children()}
</Button>

<Popover>
  <Menu class={menuClass}>
    {@render items()}
  </Menu>
</Popover>