Dropdown Menu
Thirty-two variants across six components: twenty-two rows, four menus, a submenu trigger, the trigger button, a heading and a rule.
Hover is a solid base.muted; Hover (Translucent) is the same fill at 70%, so a frosted panel still shows through the highlighted row. Combobox and Context Menu carry the same pair, and the rule is the same in all three: the row's hover matches the panel it sits on.
Three states rather than four. A destructive row fills with base.destructive on hover and takes its label and icon to base.destructive-foreground, and a 70% version of that on a translucent panel would read as a weaker warning rather than a softer one. Twenty-two variants instead of twenty-four.
160 wide, two groups and a rule
The published menu is 160 by 233: two groups of four rows at 4px of padding with a separator between them. Colour swaps the surface and the ink together; Appearance drops the surface to 70%.
A button that owns the menu, and a row that opens another
The only variant is whether the menu is showing. The trigger is a base.muted button that stays put in both, so the axis is genuinely about the panel and not about the button's pressed look. Its rows read Profile, Billing and Settings under a My Account heading and Invite users, New team and Log out under Team, with the shortcuts shadcn/ui gives them. They were Item one, two and three until now, so the main is usable as it comes.
Its corners were radius.sm where every Item beside it is radius.md, so two rows in the same menu rounded differently. Context Menu already had both at 8; this one now matches.
12 at weight 500 in base.muted-foreground. Shorter than a row at 24 rather than 28, so a heading takes less vertical room than the items under it.
A bare 1px rule with no padding of its own, unlike Context Menu's, which wraps its line in an 8px board. Here the groups carry their own 4px, so the rule sits flush between them.
Four menus doing four jobs
1000 by 1040. The copy is the file's, and the submenu and the inverted player are live.
Six components, thirty-two variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Dropdown Menu
Almost not at all, and that is the point: the rows are 312 wide here against 300 there, and this one adds a trigger button because a dropdown is opened by pressing something. Everything else, the states, the destructive treatment, the frosted panel, is the same vocabulary. Learn one and you have both.
It skips Hover (Translucent). A destructive row fills with base.destructive and takes its label and icon to base.destructive-foreground; a 70% version of that on a frosted panel reads as a weaker warning rather than a softer one. Twenty-two variants instead of twenty-four.
This one is a bare 1px rule with no padding of its own; Context Menu wraps its line in an 8px board. Here the two groups inside the menu carry their own 4px, so the rule sits flush between them and the spacing comes from the groups rather than from the rule.
Only whether the menu is showing. The trigger button is a base.muted pill that looks identical in both, so the variant is about the panel rather than about the button's pressed state. If you want a pressed trigger, that is Button's job.
They do now. All nine of them were base.muted-foreground, which is #737373 - fine on the white panel, about 3.4:1 on the #262626 inverted one, where a 12px label needs 4.5. They are bound to colors.muted-foreground-dark now, at #a1a1a1 and around 5.7:1. Worth checking on any component with an inverted surface: the foreground tokens flip when the background does, and muted text is where that gets forgotten.