Each child is a full Menu, so items, checks, radios and submenus work exactly as they do in Menu. The bar adds one shared active-menu value: opening one Menu closes the other, and once a menu is open, hovering another trigger switches to it. Use it for application commands, not site navigation.
Shortcut hints are labels and do not install keyboard shortcuts. Hovering a closed Menubar does not open it. All sibling triggers remain interactive in modal mode. Clicking outside dismisses the menus; hovering alone then stays inactive until another menu is opened. Switching between menus, by pointer or by keyboard, replaces the open menu in place without entrance or exit motion; presence motion plays only when the bar’s menus open or close entirely.
Popup menus derive their default anchor separation from three theme spacing units. Set side-offset="0" on the Menu (or participating Menu inside Menubar) for a flush popup, or supply a custom offset through the positioning API.
Keyboard
Only one trigger is in the tab order. Arrow keys, Home and End move between triggers, and ArrowDown opens the focused Menu. Give each Menu a value so the bar can identify it; an aria-label names the bar itself.
Each child Menu uses its nonempty value, otherwise its generated/stable id. Later duplicate identifiers are diagnosed and excluded.
Compact bar
Default density
Compact density
Restart from the initial state
Show the copyable source
FileExport as CSVPrintInsertRow aboveColumn leftChartFormatCurrencyPercentDate
FileExport as CSVPrintInsertRow aboveColumn leftChartFormatCurrencyPercentDate
tp-value-change reports the active Menu’s value, or an empty string when everything closes. Cancel it to keep the current menu active.
onValueChange receives the same event first; preventDefault or detail.cancelled = true vetoes. Configure the bar’s controlled or uncontrolled mode before connection; do not also control a child’s open state. Unknown controlled values open no child; removal of an uncontrolled active child clears selection.
Active menu
Default density
Compact density
Restart from the initial state
Show the copyable source
AttributePropertyTypeDefaultDescriptionvaluevaluestring—The value of the open menu, empty when none is open; set it from the start to own it, writing back each accepted proposal.default-valuedefaultValuestring | undefined—The menu open at first, by its value, when value is not set.loop-focusloopFocusbooleantrueWhether the arrow keys wrap from the last trigger to the first; set the property to false to stop at the ends.modalmodalbooleantrueWhether an open menu makes the rest of the page inert, as a single Menu does.
Properties
PropertyTypeDefaultDescriptiononValueChange((event: TpValueChangeEvent<string>) => void) | undefined—Called with each open-menu proposal before tp-value-change is dispatched.
Events
EventTypeDescriptiontp-value-changeTpValueChangeEvent<string>Cancelable proposal of the open menu's value, or an empty string when every menu closes.tp-open-changeTpSurfaceOpenChangeEventFrom a member Menu, its cancelable proposal to open or close; cancelling it keeps the current menu.
Slots
SlotDescriptiondefaultThe Menus, each with a value and a trigger.
CSS parts
PartDescription::part(menubar)The bar that holds the menu triggers.