Menus

Usage

<script lang="ts">
	let menuBtn = $state<HTMLElement>()
</script>
<Button style="anchor-name:--city-menu" popovertarget="browser-menu" bind:element={menuBtn}>
	Open Menu
</Button>
<Menu anchor={menuBtn} id="browser-menu" style="position-anchor:--city-menu;max-width: 300px">
	<MenuItem>New York</MenuItem>
	<MenuItem>Los Angeles</MenuItem>
	<MenuItem>Berlin</MenuItem>
	<MenuItem>London</MenuItem>
</Menu>

Methods

Besides the native popovertarget attribute, you can open and close the menu imperatively. Bind a reference with bind:this and type it with ReturnType<typeof Menu>; it is undefined until the component has mounted, so call through ?..

<script lang="ts">
	let menu: ReturnType<typeof Menu> | undefined = $state()
</script>

<Menu bind:this={menu} anchor={menuBtn}>
	<MenuItem>New York</MenuItem>
</Menu>
<Button onclick={() => menu?.showPopover()}>Open Menu</Button>

Method	Type	Description
`showPopover`	`() => void`	Opens the menu.
`hidePopover`	`() => void`	Closes the menu.