Defines the data configuration object for context and popover menus.

interface Menu {
    focusEl?: string | HTMLElement;
    items?: Iterable<Items> | () => Iterable<Items>;
    keyCode?: string;
    offset?: { x?: number; y?: number };
    slotAfter?: Embed;
    slotBefore?: Embed;
    slotDefault?: Embed;
    styles?: { [key: string]: string };
    transitionOptions?: { duration: number; easing: EasingReference };
}

Properties

focusEl?: string | HTMLElement

A specific HTMLElement or selector string as the explicit focus target. Note: that the menu components will automatically resume focus with the originating component / element by default. Only provide focusEl to explicitly focus a given target.

items?: Iterable<Items> | () => Iterable<Items>

The data driven menu item list or a function that returns a menu item list.

keyCode?: string

The key code to activate menu items.

offset?: { x?: number; y?: number }

Optional X / Y offsets for the menu display.

slotAfter?: Embed

A minimal Svelte config defining a menu item component after the main data driven menu items.

slotBefore?: Embed

A minimal Svelte config defining a menu item component before the main data driven menu items.

slotDefault?: Embed

A minimal Svelte config defining the default content component replacing the data driven menu items.

styles?: { [key: string]: string }

Styles to be applied inline.

transitionOptions?: { duration: number; easing: EasingReference }

Custom transition options for duration and easing function reference. The default easing function is quintOut.