Dropdown Menu

Recipe CSS

This is the exact CSS your kit ships for Dropdown Menu — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Dropdown menu ===
   Kebab-triggered menu with sections, separators, checkmarks. Different from
   command palette (no search) and from popover (focused on actions). */
.menu {
  min-width: var(--k-overlay-min, 12rem);
  padding: var(--k-s-4);
  background: var(--k-surface-overlay, var(--k-surface-raised));
  border: var(--k-hairline, 1px solid var(--k-border));
  border-radius: var(--k-radius-md);
  box-shadow: var(--k-shadow-lg, var(--k-shadow-md));
  font-size: var(--k-type-small);
  animation: var(--k-anim-menu, k-menu-roll 200ms cubic-bezier(.05,.7,.1,1) both);
  transform-origin: top;
  /* Constrain height + scroll the overflow — a long option list must not run
     off-screen (APG/Radix table-stakes). x stays clipped for the nested radius. */
  max-height: var(--k-overlay-max, 22rem); overflow: hidden auto;
  /* Nested radius — items pick this up via their border-radius rule.
   * Math: outer (radius-md) − padding (4px) = inner radius needed for
   * concentric curves. Without this, hover state of first/last item
   * corners look "boxy" against a rounded menu corner. */
  --k-nest-radius: max(2px, calc(var(--k-radius-md) - 4px));
}