Navigation Menu
A marketing nav bar: triggers that carry a chevron, links that do not, and five popover layouts behind them - all built from one 251-wide link row.
A Trigger opens a popover and carries the 16px chevron that says so; a Link goes somewhere and does not. That is the only structural difference, and it costs 20 pixels of width. Pricing and Docs on the bar are Links for exactly this reason.
Hover paints base.muted behind the label. Focused leaves the background alone and puts a 3px base.ring outside the border box, so a keyboard user tabbing along the bar never sees a trigger that looks half-open.
The label goes from base.foreground to base.primary, a step from #0a0a0a to #171717. It is almost nothing on its own, but it is the same pair the whole kit uses for a resting label against an active one, so the bar reads like everything else.
One link, with a description or without
251 wide in the matrix, and the row every popover is built from. Type Default stacks a title over a description and stands 60 tall; Type Simple drops the description and comes down to 36. Hover is the same base.muted block the bar uses.
The popover is a shape, not a list
All five share a white panel on a 1px base.foreground border at radius 10, with 12 of padding and 4 between rows. What changes is what goes inside: a column of links, a column of short links, a column with icons, two columns, or a promo card beside three links.
List, Simple List, 2 Column List and Custom are built from real Menu Link instances, so a change to the link reaches all four. The icon list is the exception: Menu Link has no icon slot, so its five rows are drawn locally. That is a gap in the component, not a decision.
320 for a single column, 512 for two, 502 for the custom one. None of them are round numbers chosen up front: each is padding plus content, which is why the two-column panel is 12 + 240 + 8 + 240 + 12 and lands exactly on 512.
A marketing nav you can open
1084 by 1140 in the file, live here, and carrying the file's own copy. Click Product, Solutions or Resources to open the popover drawn under each of them, and click the lit one again to close it. Pricing and Docs are Links, so nothing happens - which is the point of the two variants.
The bar is 460 wide and the buttons hug their labels, so the five come to exactly 460 with the 4px gaps counted. Widen a label and the bar has to be remeasured - it does not stretch to absorb it.
Four components, fifteen variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Navigation Menu
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.
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.
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.
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.