<tp-navigation-menu aria-label="Main">
<tp-navigation-menu-item value="product">
<tp-button slot="trigger" variant="ghost">Product</tp-button>
<div slot="content" style="display:grid;grid-template-columns:repeat(2,minmax(0,13rem));gap:var(--tp-space-1)">
<a href="#analytics" style="display:grid;align-content:start;gap:var(--tp-space-1)">
<strong>Analytics</strong>
<span style="color:var(--tp-muted-foreground);font-size:var(--tp-text-sm)">Dashboards for every team.</span>
</a>
<a href="#automation" style="display:grid;align-content:start;gap:var(--tp-space-1)">
<strong>Automation</strong>
<span style="color:var(--tp-muted-foreground);font-size:var(--tp-text-sm)">Workflows that run on schedule.</span>
</a>
<a href="#integrations" style="display:grid;align-content:start;gap:var(--tp-space-1)">
<strong>Integrations</strong>
<span style="color:var(--tp-muted-foreground);font-size:var(--tp-text-sm)">Connect Slack, Linear and more.</span>
</a>
<a href="#security" style="display:grid;align-content:start;gap:var(--tp-space-1)">
<strong>Security</strong>
<span style="color:var(--tp-muted-foreground);font-size:var(--tp-text-sm)">SSO, audit logs and SCIM.</span>
</a>
</div>
</tp-navigation-menu-item>
<tp-navigation-menu-item value="resources">
<tp-button slot="trigger" variant="ghost">Resources</tp-button>
<div slot="content" style="display:grid;min-inline-size:12rem">
<a href="#docs">Documentation</a>
<a href="#changelog">Changelog</a>
<a href="#community">Community</a>
</div>
</tp-navigation-menu-item>
<tp-navigation-menu-item><a href="#pricing">Pricing</a></tp-navigation-menu-item>
</tp-navigation-menu>
Usage
Navigation Menu is for moving between pages: links keep native activation, modifier keys, targets and Tab order, and nothing gets command-menu roles. For application commands, use Menu or Menubar.
It is nonmodal, and open is derived from value. Trigger focus does not open a panel. Hover/press can open; ArrowDown enters an active horizontal panel; the logical forward arrow enters a vertical panel (Right in LTR, Left in RTL). Escape returns focus only when focus was in content. Native links continue to use ordinary Tab navigation. Outside focus/press closes without a focus trap.
Panels and direct links
An Item with a trigger and content slot opens a panel on hover or press; an Item holding only a link is a plain destination. Panels share one measured viewport, so switching between Items animates size instead of reopening. Hovering a top-level direct link closes the active panel without activating the link. Links inside an open panel keep it open on hover.
Mixed items
Default density
Compact density
Restart from the initial state
Show the copyable source
Mark the current destination with the active attribute so it is exposed as aria-current="page". Add close-on-click to a link when following it should also close the panel, such as an in-page anchor.
Active link
Default density
Compact density
Restart from the initial state
Show the copyable source
With orientation="vertical", open the panel beside the list using placement="inline-end start" so the remaining destinations stay reachable. Vertical Lists stretch their top-level controls to a shared width; popup links retain their authored layout, including grids. Orientation chooses the List arrangement independently of placement.
Vertical
Default density
Compact density
Restart from the initial state
Show the copyable source
AttributePropertyTypeDefaultDescriptionvaluevaluestring—The value of the item whose panel is open, empty when none is; set it from the start to own it, writing back each accepted proposal.default-valuedefaultValuestring | undefined—The item open at first, by its value, when value is not set.
Properties
PropertyTypeDefaultDescriptiononValueChange((event: TpValueChangeEvent<string>) => void) | undefined—Called with each open-item proposal before tp-value-change is dispatched.
Events
EventTypeDescriptiontp-value-changeTpValueChangeEvent<string>Cancelable proposal of the open item's value, or an empty string when the panel closes.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 Navigation Menu Items.
CSS parts
PartDescription::part(navigation-menu)The navigation landmark around the list.::part(navigation-menu-content)The panel of an item.::part(navigation-menu-item)Each item of the list.::part(navigation-menu-link)A link, the caller's own anchor.::part(navigation-menu-list)The list of items.
<tp-navigation-menu-item>
Attributes
AttributePropertyTypeDefaultDescriptionvaluevaluestring—Stable identity of the item, which the menu's value holds while its panel is open.keep-mountedkeepMountedbooleanfalseKeeps the panel in the document while closed, hidden.show-indicatorshowIndicatorbooleantrueWhether a chevron after the trigger shows that it opens a panel.
Properties
PropertyTypeDefaultDescriptionactiveread-onlyboolean—Whether the item's panel is open.hasContentread-onlyboolean—Whether the item has a panel.
Methods
MethodReturnsDescriptionflushContent()voidProjects and styles the content now. The owner assigns the container while its own template
is still detached, so it asks for this once that template is attached and measures right after.
Slots
SlotDescriptiondefaultA direct link, for an item without a panel.triggerThe Button that opens the panel.contentThe panel: links and their layout.indicatorReplaces the chevron after the trigger.
CSS parts
PartDescription::part(navigation-menu-content)The panel of an item.::part(navigation-menu-indicator)The chevron after a trigger.::part(navigation-menu-item)Each item of the list.