6 min read

React Dropdown Component Examples

Drop-in React Dropdown examples: actions menu, right-aligned, grouped items, user avatar menu, and table-row kebab. Zero runtime deps, dot notation API.

Menus that fire actions — Edit, Duplicate, Delete on a Table row, the avatar menu in a header, a kebab tucked into a Card corner — want the smallest surface that does the job. Drivn's Dropdown is one file of just under two hundred lines with zero runtime UI dependencies. useState on the root holds open state, a mousedown listener on document closes the panel when the click lands outside the wrapper ref, and transition-[opacity,scale] duration-150 ease-out carries the entrance. The content never unmounts — it swaps between opacity-100 scale-100 and opacity-0 scale-95 pointer-events-none.

The API is dot notation. Dropdown.Trigger toggles, Dropdown.Content renders the panel, Dropdown.Item is one action with an icon prop and a destructive flag, and Dropdown.Group, Dropdown.Label, and Dropdown.Separator add structure. The trigger renders Drivn's Button with variant="outline" and rounded="md" already applied, so children become the label and nothing needs composing. align on the root picks left-0 or right-0 for the content.

Every snippet below imports from @/components/ui/dropdown, the path the CLI installs to, so each one compiles the moment npx drivn add dropdown finishes. Keyboard navigation, submenus, and checkbox items are out of scope here — that comparison covers when Radix is the better fit. What follows is the click-driven shape: an actions menu with icons, a right-aligned menu, grouped items, an avatar menu, and a table-row kebab.

Basic actions menu with icons

The minimum viable Dropdown is a Trigger plus a Content with two or three Items. Pass a Lucide icon component to the icon prop on each Dropdown.Item and the component renders it at w-4 h-4 next to the label. Set destructive on the last item to apply the text-destructive hover:bg-destructive/10 utilities defined in styles.destructive on the registry source. The menu closes automatically after the click thanks to the setOpen(false) call inside Dropdown.Item's onClick wrapper.

Because the Dropdown source lives in your repo after install, swapping the icon size, the gap between icon and label, or the destructive color is a local edit. The trigger ships with Button styling out of the box — variant="outline" and rounded="md" are wired inside the Trigger function — so the call site stays a single line per item.

1 import { Dropdown } from "@/components/ui/dropdown"
2 import { Copy, Edit, Trash2 } from "lucide-react"
3 
4 export default function Page() {
5   return (
6     <Dropdown>
7       <Dropdown.Trigger>Actions</Dropdown.Trigger>
8       <Dropdown.Content>
9         <Dropdown.Item icon={Edit} onClick={() => console.log("edit")}>
10           Edit
11         </Dropdown.Item>
12         <Dropdown.Item icon={Copy} onClick={() => console.log("copy")}>
13           Duplicate
14         </Dropdown.Item>
15         <Dropdown.Separator />
16         <Dropdown.Item icon={Trash2} destructive onClick={() => console.log("delete")}>
17           Delete
18         </Dropdown.Item>
19       </Dropdown.Content>
20     </Dropdown>
21   )
22 }

Right-aligned menu

When the trigger sits near the right edge of a container — a card header, a table cell, a sticky action bar — the menu should open to the left of the trigger so it does not clip off-screen. Pass align="right" on the Dropdown root and the styles.align.right utility (right-0 instead of left-0) anchors the content to the right side of the trigger. The vertical position is handled by absolute top-full mt-1 on styles.content regardless of which side you pick.

The align prop has two values: left (default) and right. There is no top, bottom, or auto-flip logic — for menus that need to flip around viewport edges, reach for a positioning library through Popover instead. For the common case of a left or right column action menu, the static align choice is the simpler shape and ships zero JavaScript for positioning.

1 import { Dropdown } from "@/components/ui/dropdown"
2 import { Settings, LogOut } from "lucide-react"
3 
4 export default function Page() {
5   return (
6     <div className="flex justify-end p-6">
7       <Dropdown align="right">
8         <Dropdown.Trigger>Account</Dropdown.Trigger>
9         <Dropdown.Content>
10           <Dropdown.Item icon={Settings}>Settings</Dropdown.Item>
11           <Dropdown.Separator />
12           <Dropdown.Item icon={LogOut} destructive>
13             Sign out
14           </Dropdown.Item>
15         </Dropdown.Content>
16       </Dropdown>
17     </div>
18   )
19 }

Grouped items with labels and separators

For menus with more than four or five actions, group related items together. Dropdown.Group wraps a section with a py-1 rhythm, Dropdown.Label renders a muted heading at px-3 py-1.5 text-xs font-medium text-muted-foreground, and Dropdown.Separator draws a 1px horizontal line via my-1 h-px bg-border. The pattern matches how Gmail, Linear, and Notion structure their context menus — a label sets context, the items underneath act on that context, a separator breaks to the next group.

Keep groups short — three to five items max — and label each one with one or two words. If a group grows beyond five items, the menu is doing too much; split the actions into a Tabs or Sidebar instead. The Dropdown.Group element exists for visual rhythm only; it has no semantic role attached.

1 import { Dropdown } from "@/components/ui/dropdown"
2 import { Edit, Copy, Share2, Archive, Trash2 } from "lucide-react"
3 
4 export default function Page() {
5   return (
6     <Dropdown>
7       <Dropdown.Trigger>Manage</Dropdown.Trigger>
8       <Dropdown.Content>
9         <Dropdown.Group>
10           <Dropdown.Label>Edit</Dropdown.Label>
11           <Dropdown.Item icon={Edit}>Rename</Dropdown.Item>
12           <Dropdown.Item icon={Copy}>Duplicate</Dropdown.Item>
13         </Dropdown.Group>
14         <Dropdown.Separator />
15         <Dropdown.Group>
16           <Dropdown.Label>Share</Dropdown.Label>
17           <Dropdown.Item icon={Share2}>Share link</Dropdown.Item>
18         </Dropdown.Group>
19         <Dropdown.Separator />
20         <Dropdown.Group>
21           <Dropdown.Label>Danger zone</Dropdown.Label>
22           <Dropdown.Item icon={Archive}>Archive</Dropdown.Item>
23           <Dropdown.Item icon={Trash2} destructive>
24             Delete
25           </Dropdown.Item>
26         </Dropdown.Group>
27       </Dropdown.Content>
28     </Dropdown>
29   )
30 }

User avatar menu in a header

The avatar menu is the standard pattern for the top-right corner of an app header. The trigger shows the user's avatar, opening reveals a small profile block (name, email), then a list of account actions. Pass an Avatar into Dropdown.Trigger as the children — the trigger Button renders it inside the outline style — and place the profile block as a non-interactive Dropdown.Group with a Dropdown.Label at the top of the content.

Use align="right" because the trigger sits at the right edge of the header. Keep the menu short — Profile, Settings, Theme, Sign out — and put the destructive action last with the destructive prop. The whole pattern fits in around 30 lines and ships zero positioning JavaScript.

1 import { Dropdown } from "@/components/ui/dropdown"
2 import { Avatar } from "@/components/ui/avatar"
3 import { User, Settings, Moon, LogOut } from "lucide-react"
4 
5 export default function UserMenu() {
6   return (
7     <Dropdown align="right">
8       <Dropdown.Trigger>
9         <Avatar src="/me.jpg" alt="Ada" />
10       </Dropdown.Trigger>
11       <Dropdown.Content className="min-w-[220px]">
12         <Dropdown.Group>
13           <Dropdown.Label>Ada Lovelace</Dropdown.Label>
14           <div className="px-3 pb-2 text-xs text-muted-foreground">
15             ada@example.com
16           </div>
17         </Dropdown.Group>
18         <Dropdown.Separator />
19         <Dropdown.Item icon={User}>Profile</Dropdown.Item>
20         <Dropdown.Item icon={Settings}>Settings</Dropdown.Item>
21         <Dropdown.Item icon={Moon}>Toggle theme</Dropdown.Item>
22         <Dropdown.Separator />
23         <Dropdown.Item icon={LogOut} destructive>
24           Sign out
25         </Dropdown.Item>
26       </Dropdown.Content>
27     </Dropdown>
28   )
29 }

Table-row kebab menu

Row-scoped actions need somewhere to live, and the kebab — a vertical MoreVertical glyph in the last column — is the convention because it stays quiet until someone reaches for it. Drop the icon into Dropdown.Trigger, set align="right" so the panel opens inward from the edge instead of clipping, and close each Dropdown.Item handler over the row id.

The trigger is a Button underneath, so className="h-8 w-8 p-0" squares off the hit area and keeps the row height tight. One detail worth knowing at scale: every Dropdown root registers its own mousedown listener on document from an effect that runs on mount, not on open, so two hundred rows mean two hundred listeners. For long lists, render the menu only for the hovered or focused row, or virtualize the body and let rows mount as they scroll into view. See the Data Table docs for the full integration.

1 import { Dropdown } from "@/components/ui/dropdown"
2 import { MoreVertical, Eye, Edit, Trash2 } from "lucide-react"
3 
4 export function RowActions({ id }: { id: string }) {
5   return (
6     <Dropdown align="right">
7       <Dropdown.Trigger className="h-8 w-8 p-0">
8         <MoreVertical className="h-4 w-4" />
9       </Dropdown.Trigger>
10       <Dropdown.Content>
11         <Dropdown.Item icon={Eye} onClick={() => view(id)}>
12           View
13         </Dropdown.Item>
14         <Dropdown.Item icon={Edit} onClick={() => edit(id)}>
15           Edit
16         </Dropdown.Item>
17         <Dropdown.Separator />
18         <Dropdown.Item icon={Trash2} destructive onClick={() => remove(id)}>
19           Delete
20         </Dropdown.Item>
21       </Dropdown.Content>
22     </Dropdown>
23   )
24 }

Get started

Install Drivn in one command

Copy the source into your project and own every line. Zero runtime dependencies, pure React + Tailwind.

npx drivn@latest create

Requires Node 18+. Works with npm, pnpm, and yarn.

Enjoying Drivn?

Star the repo on GitHub to follow new component releases.

Star →

Frequently asked questions

You do not need to — Dropdown.Item wraps your onClick and calls setOpen(false) automatically after your handler runs. The wrapper lives inside the registry source: each Item button invokes the consumer's onClick, then closes the menu in the same click handler. If you need the menu to stay open after an item-click (rare, but useful for confirm-then-act flows), edit the local copy at @/components/ui/dropdown and remove the setOpen(false) line from the Item handler, or skip Dropdown.Item and render a plain <button> inside Dropdown.Content.

The trigger renders Drivn's Button component under the hood with variant="outline" and rounded="md" wired in. Whatever children you pass become the button label, so an icon, an avatar, or a mixed icon-plus-text label all work — you just give up the ability to render a non-button element at the trigger position. If you need the trigger to be a link, an avatar without the outline ring, or a custom element, edit the Trigger function inside @/components/ui/dropdown after install. The file lives in your repo, and the change is local to your project.

No — Dropdown.Item is a single flat action, and there is no Dropdown.Sub or Dropdown.SubContent in the registry source. The component is designed for short, click-driven menus where every action lives at the top level. If your menu needs hierarchical actions or a Files > Recent > Yesterday-style cascade, reach for shadcn/ui's Radix-backed DropdownMenu for that specific surface — see Drivn vs shadcn Dropdown for the comparison. The two libraries can coexist in the same project.

The dropdown content is positioned with absolute top-full mt-1 on styles.content and does not portal out of the DOM. That means an overflow: hidden ancestor can clip the menu when it opens. The fix is to give the ancestor overflow: visible for that one container, or move the dropdown outside the clipped subtree. If portaling is a hard requirement — long lists of items inside a virtualised table is the classic case — pick the Radix-backed DropdownMenu through shadcn/ui, which renders its content through a portal by default.

The Dropdown file starts with "use client" because it manages state with useState and attaches a mousedown listener through useEffect. You can import it from a Server Component, but it renders on the client. Next.js draws the client boundary correctly based on the directive at the top of the file — no manual configuration needed in your layout or page. Render the trigger and content inside any server-rendered page and the dropdown hydrates on the client automatically.