Dropdown Menu

Contextual list of actions or options that appears on click or hover

What is it?

A dropdown reveals a list of choices or actions anchored to a control. Use dropdowns for compact menus, profile actions, or filters. Ensure keyboard accessibility and focus management.

Mockdown

```
[•••] ▾
────────────
Edit
Move
Duplicate
────────────
Delete
```

Characteristics:
- Anchored to a trigger control
- Keyboard and screen reader friendly
- Properly positioned and clipped on small screens

Layouts Using This Pattern

┌──────────┬────────────────────────────────────┐
│ ◉ App    │  Search [____________]  🔔  👤    │
│          ├────────────────────────────────────┤
│ ● Home   │                                    │
│ ○ Inbox  │  ┌───────────────────────────────┐│
│ ○ Tasks  │  │  ⌘K  Quick Actions            ││
│ ○ Docs   │  │  ─────────────────────────    ││
│ ○ Team   │  │  📄 New Document              ││
│ ○ API    │  │  👥 Invite Team Member        ││
│          │  │  ⚙  Open Settings             ││
│ ──────── │  │  📊 View Analytics            ││
│ Settings │  │  ...                           ││
│ Help     │  └───────────────────────────────┘│
│          │                                    │
│          │  ┌──────────┐ ┌──────────────────┐│
│          │  │ Projects │ │  Recent Activity ││
│          │  │ ──────── │ │  ─────────────── ││
│          │  │ ▸ Alpha  │ │  ● Deploy v2.1   ││
│          │  │ ▸ Beta   │ │  ○ PR merged     ││
│          │  │ ▸ Gamma  │ │  ○ Issue #42     ││
│          │  └──────────┘ └──────────────────┘│
└──────────┴────────────────────────────────────┘

SaaS

SaaS App Shell with Command Palette

A complete SaaS application shell featuring a collapsible sidebar, command palette (⌘K), notification drawer, and multi-workspace switcher — the skeleton for any SaaS product.

--app-shell--sidebar--command-palette

Complex

Use these prompts to generate layouts built with this pattern.

--dropdown --menu --select --options

Ready to build?

Use this pattern as inspiration when creating UI layouts with AI tools.

Try the Editor Browse Layout Prompts