1. framework components
  2. ›
  3. menu

Menu

Accessible dropdown and context menus for actions and navigation.

Warning

This feature is currently marked as beta and not intended for production use. It may receive breaking changes before its stable release.

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 the TriggerItem component to create nested menus within a parent menu.

Option Items

Use OptionItem to create menu items that can be toggled on or off with checkbox or radio group like behavior.

Anatomy

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

tsx 
import { Menu } from '@skeletonlabs/skeleton-react';

export default function Anatomy() {
	return (
		<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.OptionItem>
							<Menu.ItemIndicator />
							<Menu.ItemText />
						</Menu.OptionItem>
						<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—((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Provider

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

children—ReactNode

Context

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

Trigger

PropDefaultType
element—((attributes: HTMLAttributes<"button">) => Element) | undefined

Render the element yourself

ContextTrigger

PropDefaultType
element—((attributes: HTMLAttributes<"button">) => Element) | undefined

Render the element yourself

Indicator

PropDefaultType
element—((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Positioner

PropDefaultType
element—((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Content

txt 
card bg-surface-50-950 border border-surface-200-800 p-2 flex flex-col items-stretch gap-2 shadow-lg min-w-48
PropDefaultType
element—((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

ItemGroup

PropDefaultType
element—((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

ItemGroupLabel

txt 
text-surface-600-400 text-xs px-2 py-1
PropDefaultType
element—((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Item

txt 
flex justify-between items-center px-2 py-1 rounded cursor-pointer data-highlighted:preset-tonal
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—((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

OptionItem

PropDefaultType
checked—boolean

Whether the option is checked

type—"radio" | "checkbox"

Whether the option is a radio or a checkbox

value—string

The value of the option

onCheckedChange—((checked: boolean) => void) | undefined

Function called when the option state is changed

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—((attributes: HTMLAttributes<"div">) => Element) | 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—((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

ItemText

PropDefaultType
element—((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

ItemIndicator

PropDefaultType
element—((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Separator

txt 
hr
PropDefaultType
element—((attributes: HTMLAttributes<"hr">) => Element) | undefined

Render the element yourself

Arrow

PropDefaultType
element—((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

ArrowTip

PropDefaultType
element—((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

View page on GitHub