1. framework components
  2. ›
  3. menu

Menu

Accessible dropdown and context menus for actions and navigation.

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.

Disabled Item

Set the disabled prop to enable the disabled state.

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

Prop Default Type
ids — Partial<{ trigger: string | ((value?: string | undefined) => string); contextTrigger: string | ((value?: string | undefined) => 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.
loopFocus false boolean | undefined

Whether to loop the keyboard navigation.
positioning — PositioningOptions | undefined

The options used to dynamically position the menu
closeOnSelect true boolean | 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.
typeahead true boolean | undefined

Whether the pressing printable characters should trigger typeahead navigation
composite true boolean | 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
triggerValue — string | null | undefined

The controlled trigger value
defaultTriggerValue — string | null | undefined

The initial trigger value when rendered. Use when you don't need to control the trigger value.
onTriggerValueChange — ((details: TriggerValueChangeDetails) => void) | undefined

Function called when the trigger value changes.
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

Prop Default Type
value — MenuApi<PropTypes> & { service: MenuService; }

children — ReactNode

Context

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

Trigger

Prop Default Type
element — ((attributes: HTMLAttributes<"button">) => Element) | undefined

Render the element yourself

ContextTrigger

Prop Default Type
element — ((attributes: HTMLAttributes<"button">) => Element) | undefined

Render the element yourself

Indicator

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Positioner

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Content

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

ItemGroup

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

ItemGroupLabel

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Item

Prop Default Type
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

Prop Default Type
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

Prop Default Type
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

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

ItemIndicator

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Separator

Prop Default Type
element — ((attributes: HTMLAttributes<"hr">) => Element) | undefined

Render the element yourself

Arrow

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

ArrowTip

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself
View page on GitHub