NavigationMenu / Menu Link - Type × State: Default · Simple × Default · Hover - 251 × 60 or 251 × 36
NavigationMenu / Popover - Type: List · Simple List · Simple List with Icon · 2 Column List · Custom - 320 to 512 wide
NavigationMenu - none: 460 × 36 - the bar, three triggers and two links hugging their labels
Using the Navigation Menu
What separates a Trigger from a Link?
The chevron, and what happens when you press it. A Trigger opens a popover and carries a 16px chevron to say so; a Link navigates and carries nothing. It is 20 pixels of width and one child, but it is the difference between a menu and a destination, and the bar uses both: Product, Solutions and Resources are Triggers, Pricing and Docs are Links.
Why five popover layouts rather than one?
Because a nav popover is a container, not a list. The kit ships the five shapes real marketing sites use - a column of links with descriptions, the same without, a column with icons, two columns, and a promo card beside three links - so you pick a shape instead of building one. All five share the same white panel, 1px base.foreground border, radius 10 and 12 of padding.
What is the Menu Link doing in all of this?
Carrying the content. Four of the five popovers are built from real Menu Link instances at 240, 250 or 296 wide, so editing the link reaches all of them at once. Type Default is 60 tall with a description under the title; Type Simple drops to 36 with just the title.
How does Focused differ from Hover?
Hover fills with base.muted and moves the label from base.foreground to base.primary. Focused leaves the background untouched and puts a 3px base.ring outside the border box, so tabbing along the bar never produces a trigger that looks like it is about to open.