Menu

# Features

• Customization options for side, alignment, offsets, and collision handling.
• Fully managed focus for seamless navigation.
• Full keyboard navigation support, including automatic focusing on the first or last item.
• Typeahead support for quickly focusing items by typing their text.
• Support for disabled items.

# Dependencies

This module depends on @floating-ui/dom.

# Anatomy

Typically, a menu consists of:

• Trigger: The element that toggles the menu.
• Menu: The container for menu items. The menu consists of:
  • Item: An element used to trigger the selection.
  • Separator: An optional element used to visually separate menu items.

<script>
	import { createMenu } from '@grail-ui/svelte';

	const { useTrigger, triggerAttrs, useMenu, menuAttrs, itemAttrs, open } = createMenu();

	const options = [
		{ id: "edit", label: "Edit" },
		{ id: "delete", label: "Delete" },
		{ id: "destroy", label: "Destroy" },
	];
</script>

<button use:useTrigger {...$triggerAttrs}>Actions</button>

{#if $open}
	<ul use:useMenu {...$menuAttrs}>
		{#each options as option (option.id)}
			<li><a href="/" {...$itemAttrs(option.id)}>{option.label}</a></li>
		{/each}
	</ul>
{/if}

# Examples

# Listening to item selection

Pass onSelect to the createMenu function to perform some custom logic when an item is selected. This callback is invoked with the id of the item.

createMenu({
	
onSelect(id) {
		
console.log(id);
	
},
})

# Accessibility

# Keyboard Interactions

# API

# MenuConfig

# MenuReturn

# PositioningOptions