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.
anchorOrigin	Popover2Nonant \| undefined	no	'bottom-left'	The point in a 3x3 grid on the anchor that should be used as the origin for the menu.
items	Snippet \| undefined	no	undefined	The items to display in the menu.
lightDismiss	boolean \| null \| undefined	no	true	When true, the menu closes when another element is clicked or focused. Also closes when another dropdown opens.
menuClass	string	no	''	Additional class names to apply to the menu.
offsetX	number	no	0	The how many pixels to move the menu left (negative) or right (positive).
offsetY	number	no	0	The how many pixels to move the menu up (negative) or down (positive).
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.
placement	'auto'\| Popover2Nonant \| undefined	no	'bottom-right'	How the menu should be positioned relative to the anchor point. When 'auto', placement follows anchorOrigin.
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>