Home
Components
Dropdown Menu

Dropdown Menu components

15 free, copy-and-go React Dropdown Menu examples built on the SevenUI Dropdown Menu primitive. Install any of them with the shadcn CLI.

Read the docs Browse Pro blocks Share on X (opens in a new tab)

On this page

Account menu
Column visibility
Sort by
Message actions
Two-line items
Item states
Custom indicators
Avatar multi-select
Controlled with hotkey
Workspace switcher
Share link access
Subscription actions
Save to list
Repository clone menu
Support ticket triage

Account menu

An avatar-triggered account menu with a name and email header, grouped items with shortcut hints, and a destructive log out.

… add @sevenui/component/dropdown-menu-01

TSX
Loading source…

Column visibility

A View menu of checkbox items that toggles table columns, with a locked Title column, a shown-count in the trigger, and a reset item.

… add @sevenui/component/dropdown-menu-02

TSX
Loading source…

Sort by

Two radio groups pick the sort field and the order, and the trigger mirrors the current sort with a direction icon.

… add @sevenui/component/dropdown-menu-03

TSX
Loading source…

Message actions

A chat message overflow menu with a row of reaction checkbox items, reply, copy, pin and mark-unread actions, a Remind me submenu, and delete with undo.

… add @sevenui/component/dropdown-menu-04

Daniel Kim2:20 PM

The staging deploy is green. Shipping the release notes at 3.

TSX
Loading source…

Two-line items

A create menu whose items pair an icon tile with a title and a one-line description.

… add @sevenui/component/dropdown-menu-05

TSX
Loading source…

Item states

An export menu that stays open while items move through loading, success, and error-with-retry states, plus a disabled plan-gated item.

… add @sevenui/component/dropdown-menu-06

TSX
Loading source…

Custom indicators

A status picker whose radio items replace the checkmark with colored status rings that fill when selected, with number-key shortcuts.

… add @sevenui/component/dropdown-menu-07

SEV-412 Webhook retries drop payloads

TSX
Loading source…

Avatar multi-select

Checkbox items with avatars and roles for assigning people, reflected in a stacked-avatar trigger.

… add @sevenui/component/dropdown-menu-08

TSX
Loading source…

Controlled with hotkey

A controlled file actions menu that opens from its trigger or a global Cmd+J / Ctrl+J shortcut and reports the last action.

… add @sevenui/component/dropdown-menu-09

FIG

Q3 roadmap

Edited 12 minutes ago by Omar

No actions yet.

Press⌘J

TSX
Loading source…

Workspace switcher

A sidebar workspace switcher whose radio items show each team's mark, member count, and plan, followed by invite, settings, and create actions.

… add @sevenui/component/dropdown-menu-10

TSX
Loading source…

Share link access

A file sharing panel where one menu sets who can open the link and a second sets the link role, with a copy-link confirmation.

… add @sevenui/component/dropdown-menu-11

General access

Q3 roadmap review.pdf

Signed-in teammates with the link can open it.

Changes save automatically.

TSX
Loading source…

Subscription actions

A billing plan card whose overflow menu switches the billing cycle, pauses via a duration submenu, resumes, or cancels, and updates the card summary.

… add @sevenui/component/dropdown-menu-12

Growth plan

Active

$48/month

Billing: Monthly
Next charge: Oct 14
Payment method: Visa ending 4242

3 seats · 12,000 tracked events included per month.

TSX
Loading source…

Save to list

A product card with a save menu of checkbox lists and a price-drop alert, reflected in the heart trigger and a status line.

… add @sevenui/component/dropdown-menu-13

Stoneware pour-over set

$64

4.8 · 1,204 reviews · Ships in 2 days

In Kitchen refresh

TSX
Loading source…

Repository clone menu

A repository Code menu with a segmented protocol picker, a copyable clone command, and open or download actions.

… add @sevenui/component/dropdown-menu-14

Branch main14 branches · 32 tags

src/routes/invoices.ts2 hours ago
migrations/0042_add_tax_rates.sqlyesterday

TSX
Loading source…

Support ticket triage

A support ticket whose Triage menu assigns an agent, sets priority and labels, and snoozes or resolves through submenus, updating the ticket details.

… add @sevenui/component/dropdown-menu-15

SUP-4821 · via email · 12 min ago

Charged twice for the September invoice

Hi, my card was charged $249 twice on Sep 14 for invoice INV-20931. Can you refund the duplicate? Thanks, Elena

Status: Open
Assignee: Unassigned
Priority: High
Labels: Billing

TSX
Loading source…

PreviousDrawer NextHover Card

On this page

Account menu
Column visibility
Sort by
Message actions
Two-line items
Item states
Custom indicators
Avatar multi-select
Controlled with hotkey
Workspace switcher
Share link access
Subscription actions
Save to list
Repository clone menu
Support ticket triage

Components are the parts. Blocks are the page.

Pro blocks are whole sections and pages — heroes, pricing, dashboards, auth — composed from the same primitives and themed by the same tokens you already use. Install one and it is yours.

Browse blocks Get Pro — $99

One purchase, yours forever. $99 at launch instead of $249.

pricing-01