1. framework components
  2. ›
  3. menu

Menu

Accessible dropdown and context menus for actions and navigation.

Breaking convention in Skeleton, this component is provided “headless”. Meaning no default styles are applied out of the box. This ensures you retain full control of all styling for maximum flexibility.

Grouped Items

Use ItemGroup and ItemGroupLabel to organize menu items into logical sections.

Context Menu

Use ContextTrigger instead of Trigger to open the menu on right-click.

Nested Menu

Use multiple Menu components inside a root Menu to create nested menus using the ItemTrigger component.

Anatomy

Here’s an overview of how the Menu component is structured in code:

svelte 
<script lang="ts">
	import { Menu, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<Menu>
	<Menu.Trigger>
		<Menu.Indicator />
	</Menu.Trigger>
	<Menu.ContextTrigger>
		<Menu.Indicator />
	</Menu.ContextTrigger>
	<Menu.Positioner>
		<Menu.Content>
			<Menu.ItemGroup>
				<Menu.ItemGroupLabel />
				<Menu.Item>
					<Menu.ItemIndicator />
					<Menu.ItemText />
				</Menu.Item>
				<Menu.TriggerItem>
					<Menu.ItemIndicator />
					<Menu.ItemText />
				</Menu.TriggerItem>
			</Menu.ItemGroup>
			<Menu.Separator />
			<Menu.Arrow>
				<Menu.ArrowTip />
			</Menu.Arrow>
		</Menu.Content>
	</Menu.Positioner>
</Menu>

API Reference

Root

PropDefaultType
ids—Partial<{ trigger: string; contextTrigger: string; content: string; groupLabel: (id: string) => string; group: (id: string) => string; positioner: string; arrow: string; }> | undefined

The ids of the elements in the menu. Useful for composition.

defaultHighlightedValue—string | null | undefined

The initial highlighted value of the menu item when rendered. Use when you don't need to control the highlighted value of the menu item.

highlightedValue—string | null | undefined

The controlled highlighted value of the menu item.

onHighlightChange—((details: HighlightChangeDetails) => void) | undefined

Function called when the highlighted menu item changes.

onSelect—((details: SelectionDetails) => void) | undefined

Function called when a menu item is selected.

anchorPoint—Point | null | undefined

The positioning point for the menu. Can be set by the context menu trigger or the button trigger.

loopFocusfalseboolean | undefined

Whether to loop the keyboard navigation.

positioning—PositioningOptions | undefined

The options used to dynamically position the menu

closeOnSelecttrueboolean | undefined

Whether to close the menu when an option is selected

aria-label—string | undefined

The accessibility label for the menu

open—boolean | undefined

The controlled open state of the menu

onOpenChange—((details: OpenChangeDetails) => void) | undefined

Function called when the menu opens or closes

defaultOpen—boolean | undefined

The initial open state of the menu when rendered. Use when you don't need to control the open state of the menu.

typeaheadtrueboolean | undefined

Whether the pressing printable characters should trigger typeahead navigation

compositetrueboolean | undefined

Whether the menu is a composed with other composite widgets like a combobox or tabs

navigate—((details: NavigateDetails) => void) | null | undefined

Function to navigate to the selected item if it's an anchor element

dir"ltr""ltr" | "rtl" | undefined

The document's text/writing direction.

getRootNode—(() => ShadowRoot | Node | Document) | undefined

A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

onEscapeKeyDown—((event: KeyboardEvent) => void) | undefined

Function called when the escape key is pressed

onRequestDismiss—((event: LayerDismissEvent) => void) | undefined

Function called when this layer is closed due to a parent layer being closed

onPointerDownOutside—((event: PointerDownOutsideEvent) => void) | undefined

Function called when the pointer is pressed down outside the component

onFocusOutside—((event: FocusOutsideEvent) => void) | undefined

Function called when the focus is moved outside the component

onInteractOutside—((event: InteractOutsideEvent) => void) | undefined

Function called when an interaction happens outside the component

element—Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

Provider

PropDefaultType
value—() => MenuApi<PropTypes> & { service: MenuService; }

children—Snippet<[]> | undefined

Context

PropDefaultType
children—Snippet<[() => MenuApi<PropTypes> & { service: MenuService; }]>

Trigger

PropDefaultType
element—Snippet<[HTMLAttributes<"button">]> | undefined

Render the element yourself

ContextTrigger

PropDefaultType
element—Snippet<[HTMLAttributes<"button">]> | undefined

Render the element yourself

Indicator

PropDefaultType
element—Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

Positioner

PropDefaultType
element—Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

Content

PropDefaultType
element—Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

ItemGroup

PropDefaultType
element—Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

ItemGroupLabel

PropDefaultType
element—Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

Item

PropDefaultType
value—string

The unique value of the menu item option.

disabled—boolean | undefined

Whether the menu item is disabled

valueText—string | undefined

The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

closeOnSelect—boolean | undefined

Whether the menu should be closed when the option is selected.

element—Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

TriggerItem

PropDefaultType
value—string

The unique value of the menu item option.

disabled—boolean | undefined

Whether the menu item is disabled

valueText—string | undefined

The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

closeOnSelect—boolean | undefined

Whether the menu should be closed when the option is selected.

element—Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

ItemText

PropDefaultType
element—Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

ItemIndicator

PropDefaultType
element—Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

Separator

PropDefaultType
element—Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

Arrow

PropDefaultType
element—Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

ArrowTip

PropDefaultType
element—Snippet<[HTMLAttributes<"div">]> | undefined

Render the element yourself

View page on GitHub