---
title: "state-based dropdown trigger styling"
url: "https://sanyam.sh/blogs/state-based-dropdown-trigger-styling"
date: "2025-12-11"
readTime: "3 min read"
description: "Why a dropdown trigger should visually reflect its own open state, and how aria-expanded does it in one line of CSS rather than component state."
---

# state-based dropdown trigger styling

when a dropdown opens, its trigger should visually reflect that state. this gives users immediate feedback that the interaction is active, creating a clear spatial relationship between the trigger and content.

_An interactive demo runs here on the page._

bind trigger styling to the dropdown's open state:

```tsx
const [isOpen, setIsOpen] = useState(false);

<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
  <DropdownMenuTrigger asChild>
    <button
      className={`base-styles ${isOpen ? "opacity-80 bg-neutral-800/30" : ""}`}
    >
      trigger
    </button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>{/* content */}</DropdownMenuContent>
</DropdownMenu>;
```

common patterns: reduce opacity (`opacity-80`), add background (`bg-neutral-800/30`), or combine both. use transitions for smooth state changes.