triggerreq- Type
ReactNode- Default
- -
- Description
- Interactive focus target button triggering popup dropdowns.
Components / Overlay
Dropdown Menu
கீழிறங்கு பட்டியல்
Dropdown menus present a list of actions or options triggered by clicking a button. Use them for user account menus, row actions in tables, and grouped commands.
கீழிறங்கு பட்டியல்கள் ஒரு பொத்தானை கிளிக் செய்வதால் தூண்டப்படும் செயல்களின் பட்டியலை காட்டுகின்றன.
User account menu
Component preview
Profile dropdownசுயவிவர பட்டியல்Row actions
Component preview
Table row actionsஅட்டவணை வரிசை செயல்கள்Structure
Anatomy
4 parts documented for implementation and review.
1
DropdownMenuTrigger
தூண்டிrequired<button>Interactive element that opens the menu on click. Receives aria-haspopup=menu and aria-expanded automatically. Can wrap any element via asChild. Maintains trigger focus when menu closes.
2
DropdownMenuLabel
பட்டியல் தலைப்பு<span>Section header label for grouping related items. Renders in text-xs muted-foreground. Not focusable or clickable. Use for organizing items — e.g., Actions, Settings, Danger zone.
3
DropdownMenuItem
பட்டியல் உருப்படிrequired<div>Actionable menu option with role=menuitem. Supports left-positioned icons (h-4 w-4), right-aligned keyboard shortcuts, disabled state, and destructive variant for dangerous actions.
4
DropdownMenuSeparator
பிரிப்பு கோடு<div>Thin h-px bg-border line with role=separator. Visually groups related items — e.g., separating Edit/Copy from Delete.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
triggerreq | ReactNode | - | Interactive focus target button triggering popup dropdowns. |
Best practices
Use destructive variant for delete actions
நீக்கும் செயல்களுக்கு அழிவுகரமான வடிவம் பயன்படுத்தவும்
Mark delete or remove actions with the destructive item variant so users immediately recognize the risk before clicking.
நீக்கும் செயல்களை சிவப்பு நிறத்தில் காட்டி பயனர் ஆபத்தை உடனே அறிய உதவுங்கள்.
Don't put more than 8–10 items without grouping
8–10-க்கும் அதிக பட்டியல் உருப்படிகளை குழு இல்லாமல் வைக்காதே
Flat dropdowns with many items are hard to scan — use separators and labels to group related actions.
பல உருப்படிகள் உள்ள தட்டையான பட்டியல் படிக்க கடினமாக இருக்கும் — குழுக்களாக தொகுக்கவும்.
Show keyboard shortcuts for power users
வல்லுநர் பயனர்களுக்கு விசைப்பலகை குறுக்குவழிகள் காட்டவும்
Display keyboard shortcuts in the menu using DropdownMenuShortcut so power users can work faster.
வல்லுநர் பயனர்கள் வேகமாக பணி செய்ய விசைப்பலகை குறுக்குவழிகளை பட்டியலில் காட்டவும்.
Don't use DropdownMenu for value selection
மதிப்பு தேர்வுக்கு DropdownMenu பயன்படுத்தாதே
DropdownMenu is for actions (do something), not value selection — use Select for choosing from a list of values.
DropdownMenu செயல்களுக்கானது — மதிப்பை தேர்வு செய்ய Select பயன்படுத்தவும்.