Components · Overlays
Dropdown menu
A popover list of actions on a popover surface with shadow-md. Items
hover to accent; the destructive item uses the danger tokens.
Preview
The open menu surface across the three themes.
Light
Dark
Accessibility
Live demo
Open the menu — click outside or press Escape to close.
Spec
Values and token references straight from the Zetta spec.
dropdown-menu
- backgroundColor
- {colors.popover}
- textColor
- {colors.popover-foreground}
- borderColor
- {colors.hairline}
- borderWidth
- 1px
- borderRadius
- {rounded.base}
- shadow
- {shadows.md}
- padding
- 6px
- minWidth
- 180px
dropdown-menu-item
- textColor
- {colors.ink}
- fontFamily
- Geist
- fontSize
- 14px
- fontWeight
- 400
- lineHeight
- 1.6
- borderRadius
- {rounded.base}
- paddingX
- 12px
- paddingY
- 10px
- gap
- 8px
- cursor
- pointer
- iconColor
- {colors.muted}
- iconSize
- 16px
dropdown-menu-item-hover
- backgroundColor
- {colors.accent}
dropdown-menu-item-danger
- textColor
- {colors.danger-text}
- iconColor
- {colors.danger-text}
dropdown-menu-item-danger-hover
- backgroundColor
- {colors.danger-bg}
dropdown-menu-item-disabled
- textColor
- {colors.disabled-text}
- cursor
- not-allowed
dropdown-menu-item-focus
- outline
- 2px solid {colors.border-focus}
- outlineOffset
- 2px
dropdown-menu-separator
- color
- {colors.hairline}
- height
- 1px
- marginX
- 4px
- marginY
- 6px
dropdown-menu-label
- textColor
- {colors.muted}
- fontFamily
- Geist
- fontSize
- 12px
- fontWeight
- 500
- letterSpacing
- 0.01em
- paddingX
- 12px
- paddingY
- 6px
Build with the skill
No package to install — hand this to your AI to generate the menu in your stack (your framework's accessible menu primitive + these tokens).
Implement the Zetta "Dropdown menu" component in this project's stack using the zetta-design-md skill.
- Apply the `dropdown-menu` spec from the skill (variants: item, item-danger, separator, label).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.Anatomy & rules
- Popover surface, 1px hairline, 8px radius, 6px padding,
shadow-md, min-width 180. - Items: 10×12 padding, 16px leading icon in
muted; hoveraccent. The danger item swaps to danger text + a danger-bg hover. - Trigger uses
aria-haspopup="menu"+aria-expanded; items userole="menuitem". Close on outside click and Escape.
Known gaps
- Submenus, checkbox/radio menu items, and the related context-menu are not yet specified.