Capítulo 27 de 51
A click-triggered dropdown menu — the anatomy and item vocabulary (items, submenus, radio/checkbox items) that Context Menu (ch020) and Menubar (ch028) both reuse, with Viewport supporting content transitions between menu "screens" (e.g. drilling into a submenu in place).
Root → Trigger, Portal → Backdrop, Positioner → Popup (Arrow, Item, LinkItem, Separator, SubmenuRoot → SubmenuTrigger, Group → GroupLabel, RadioGroup → RadioItem → RadioItemIndicator, CheckboxItem → CheckboxItemIndicator, Viewport).Viewport: added in v1.3.0 for content transitions — exposes data-activation-direction, data-current/data-previous, data-transitioning for animating between menu levels as a submenu opens/closes in place instead of stacking popups.Trigger/SubmenuTrigger support openOnHover, delay, closeDelay — configure hover-intent timing per trigger.Handle/createHandle()/handle prop/triggerId system as Dialog/AlertDialog, for opening a menu from a trigger that isn't its sibling.Item (action), LinkItem (renders as a link, closeOnClick), CheckboxItem/RadioItem (selection state within the menu, each with an ...Indicator sub-part), SubmenuTrigger (nested menu).loopFocus/orientation on Root, don't hand-roll.| Part | Notable props | Notable data attributes |
|---|---|---|
Root | open/onOpenChange, modal, loopFocus, orientation, handle, closeParentOnEsc | — |
Trigger | openOnHover, delay, closeDelay, handle, payload | data-popup-open, data-pressed |
Item | label, onClick, closeOnClick, disabled | data-highlighted, data-disabled |
CheckboxItem | checked/onCheckedChange, closeOnClick | data-checked, data-unchecked, data-highlighted |
RadioGroup/RadioItem | value/onValueChange (group), value (item) | data-checked, data-unchecked |
Viewport | — | data-activation-direction, data-current, data-previous, data-transitioning |
Viewport when you want a "drill down into submenu, replace content in place" UX (mobile-app-style menu navigation) instead of the default stacked-popup submenu presentation.openOnHover/delay/closeDelay deliberately per trigger — the defaults favor click-to-open; hover-opening is opt-in and needs sensible delay tuning to avoid accidental triggers.LinkItem vs. Item + render={<a/>}: prefer LinkItem when available — it's purpose-built for link semantics within a menu (vs. Radix's approach of overriding Item's render).Menu.Roots coordinated under one horizontal bar.Handle/detached-trigger pattern shared with Dialog/AlertDialog.