A Menu holds commands, not navigation; use Navigation Menu for site links. Put a Button in the trigger slot and the command tree in the default slot. Arrow keys, Home/End and typeahead move through enabled items, and Tab closes the menu rather than trapping focus.
Trigger Enter/Space or pointer press opens. ArrowDown/ArrowUp opens at the first/last enabled item. Escape closes the top applicable branch; Tab closes and continues outside rather than trapping command focus. Disabled entries are excluded. Pointer highlighting never selects a check or radio by itself.
Commands
Activating an item fires a cancelable tp-action with the item’s value, then closes the menu. Listen on the Menu instead of wiring each item.
tp-action is a separate cancelable Menu event with {value, item, sourceEvent} emitted before selection commit. Canceling it prevents the command and close.
Handling commands
Default density
Compact density
Restart from the initial state
Show the copyable source
Invoice INV-2041Download PDFSend reminderMark as paid
Invoice INV-2041Download PDFSend reminderMark as paid
Checkbox items toggle independently; a radio group keeps exactly one choice. Both stay open on activation so several settings can change in one visit. A child with data-menu-label labels the group.
No checkbox/radio here is a standalone form field.
View options
Default density
Compact density
Restart from the initial state
Show the copyable source
ViewShow sidebarShow status barWord wrapDensityCompactComfortableSpacious
ViewShow sidebarShow status barWord wrapDensityCompactComfortableSpacious
Nest a tp-menu with its own trigger to create a submenu at any depth. The inline-forward arrow opens it and the backward arrow returns to the parent item.
Moving to a different item in any parent menu closes that parent’s open child branch, including deeper descendants. The parent and its ancestors stay open, and the new item keeps the highlight.
Nested menus
Default density
Compact density
Restart from the initial state
Show the copyable source
invocation="context" turns the trigger slot into a context target: right-click, Shift+F10 or a long touch opens the menu at the pointer, and ordinary clicks keep the target’s own behavior. Make the target focusable so keyboard users can reach it.
An external target can be associated with for="target-id". A single-touch hold opens after 500 ms; movement beyond 10 coordinate units, a second touch, release, or cancellation cancels the hold. Another context invocation moves the anchor without closing and reopening. A context menu supports the same commands, groups, shortcuts, separators, checks, radio choices and any number of nested Menu levels.
Context invocation
Default density
Compact density
Restart from the initial state
Show the copyable source
open-on-hover opens a top-level Menu on pointer hover after open-delay. Submenus already open on hover; keyboard and press activation keep working either way.
Open on hover
Default density
Compact density
Restart from the initial state
Show the copyable source
AttributePropertyTypeDefaultDescriptionvaluevaluestring''The value of the last activated command.invocationinvocation'trigger' | 'context''trigger'trigger opens from a press on the trigger; context turns the trigger into a context target that opens the menu at the pointer on a right-click, Shift+F10 or a long touch.forforstring''The id of a trigger elsewhere in the document.item-variantitemVariant'ghost' | 'destructive''ghost'Default treatment of the items, ghost or destructive; an item's own variant wins.loop-focusloopFocusbooleantrueWhether the arrow keys wrap from the last item to the first; set the property to false to stop at the ends.highlight-item-on-hoverhighlightItemOnHoverbooleantrueWhether the pointer highlights the item under it.close-parent-on-escapecloseParentOnEscapebooleanfalseMakes Escape in a submenu close the whole menu instead of only the submenu.
Events
EventTypeDescriptiontp-actionCustomEvent<{ value: unknown; item: TpMenuItem; sourceEvent: Event; }>Cancelable, when an item is activated, before it is committed and the menu closes; detail.value is the item's value and detail.item the item.tp-value-changeTpValueChangeEvent<string | boolean>When a native element with a checkbox or radio item role changes its checked state; detail.value.tp-open-changeTpSurfaceOpenChangeEventCancelable proposal to open or close, before the surface changes; detail.value is the proposed state, detail.reason what asked (a trigger press, hover or focus, Escape, an outside press, a close action or code) and detail.trigger the trigger. On a close, detail.preventUnmountOnClose() keeps the content mounted.tp-open-change-completeCustomEvent<{ open: boolean; }>After the surface finishes opening or closing; detail.open.
Slots
SlotDescriptiondefaultThe items: Menu Items, checkbox and radio items, Separators, nested Menus as submenus, and links.triggerThe Button that opens the menu, or with invocation="context" the area that opens it on a context click.
<tp-menu-item>
Attributes
AttributePropertyTypeDefaultDescriptionlabellabelstring''Accessible name of the item, when its content does not say it in words.variantvariant'ghost' | 'destructive' | undefined—destructive marks a command that deletes or cannot be undone; by default the menu's item-variant.insetinsetbooleanfalseIndents the label to the text of items with a leading icon.valuevalueunknown—The value tp-action reports for this item.native-actionnativeActionbooleanfalseRenders a native button, so Enter and Space reach the item's own handlers as a native press.close-on-clickcloseOnClickbooleantrueWhether activating the item closes the menu.
Properties
PropertyTypeDefaultDescriptionitemVariantread-only'ghost' | 'destructive'—The treatment in effect: the item's variant, else the menu's.onClick((event: Event) => void) | undefined—Called when the item is activated, before the menu handles it; preventComponentHandling() on the event stops the menu.itemDisabledread-onlyboolean—Whether the item is unavailable, by itself or because its menu is disabled.highlightedread-onlyboolean—Whether the item is highlighted.
Methods
MethodReturnsDescriptionactivate(event)voidActivates the item as a press would.focus(options?)voidMoves focus to the item.click()voidClicks the item, activating it.
Slots
SlotDescriptiondefaultThe label, with an optional leading Icon and a trailing Kbd group marked data-menu-shortcut.
<tp-menu-checkbox-item>
Attributes
AttributePropertyTypeDefaultDescriptioncheckedcheckedboolean—Whether the setting is on; set it from the start to own the state, writing back each accepted proposal.default-checkeddefaultCheckedboolean | undefined—Initial checked state when checked is not set.keep-mountedkeepMountedbooleanfalseKeeps the check mark in the document while unchecked, hidden.
Properties
PropertyTypeDefaultDescriptiononCheckedChange((event: TpValueChangeEvent<boolean>) => void) | undefined—Called with each checked-state proposal before tp-value-change is dispatched.
Events
EventTypeDescriptiontp-value-changeTpValueChangeEvent<boolean>Cancelable proposal of the new checked state; detail.value.
Slots
SlotDescriptiondefaultThe label.
CSS parts
PartDescription::part(indicator)The check of a checkbox item or the mark of a radio item, shown while it is on.
<tp-menu-radio-group>
Attributes
AttributePropertyTypeDefaultDescriptiondefault-valuedefaultValueunknown—Initial choice when value is not set.labellabelstring''The group's accessible name. Without it, a child carrying data-menu-label names the group.
The name goes to the semantic group, so the host carries no ARIA of its own.
Properties
PropertyTypeDefaultDescriptiononValueChange((event: TpValueChangeEvent<unknown>) => void) | undefined—Called with each choice proposal before tp-value-change is dispatched.valueunknown—The value of the chosen item; set it from the start to own the choice, writing back each accepted proposal.
Events
EventTypeDescriptiontp-value-changeTpValueChangeEvent<unknown>Cancelable proposal of the chosen item's value; detail.value.
Slots
SlotDescriptiondefaultThe Menu Radio Items, with an optional first child marked data-menu-label that names the group.
<tp-menu-radio-item>
Attributes
AttributePropertyTypeDefaultDescriptionkeep-mountedkeepMountedbooleanfalseKeeps the choice mark in the document while unselected, hidden.
Properties
PropertyTypeDefaultDescriptionradioGroupread-onlyTpMenuRadioGroup | null—The Menu Radio Group the item belongs to.checkedread-onlyboolean—Whether the item is the group's value.
Slots
SlotDescriptiondefaultThe label.
CSS parts
PartDescription::part(indicator)The check of a checkbox item or the mark of a radio item, shown while it is on.
Related
Components, widgets and patterns that use this one.