[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6},"actionData","errors","routes/components/component",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18},"meta",{"_46":265,"_48":200,"_50":266,"_267":268,"_269":59,"_270":271,"_272":273},"props",[198],"examples",[192,193,194],"bannerSrc","/banners/menu.svg","storybookUrl","https://commure-ui-sb.pages.dev/?path=/story/menu--default","usage",{"_19":20,"_21":22,"_23":24,"_25":26,"_17":27,"_28":29,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41},"lastUpdated","September 2026","figmaUrl","https://www.figma.com/design/3exwSb4VUegQIRcXZsPVV9/Design-System-3.0?node-id=1231-31428","sourceUrl","https://github.com/commure/commure-ui","anatomy",{"_125":167,"_168":169},{"_157":158,"_159":160},"variants",[137,138,139,140,141],"bestPractices",[116,117,118,119],"behaviors",[101,102,103],"contentGuidelines",[94],"accessibility",{"_72":73,"_74":75,"_76":77,"_78":79},"qa",[61,62,63],"related",[42,43,44,45],{"_46":58,"_48":59,"_50":60},{"_46":55,"_48":56,"_50":57},{"_46":52,"_48":53,"_50":54},{"_46":47,"_48":49,"_50":51},"slug","popover","name","Popover","description","Non-menu floating content anchored to a control.","button","Button","Typical Menu.Trigger host via render.","link","Link","Inline navigation without a popup.","navigation","Navigation","Sidebar NavigationItem destinations.",{"_64":70,"_66":71},{"_64":68,"_66":69},{"_64":65,"_66":67},"question","How do submenus work?","answer","Wrap SubmenuTrigger + SubmenuContent in SubmenuRoot. SubmenuTrigger auto-adds a chevron via Menu.Item.Submenu.","How do I open from a Button?","Use Menu.Trigger with render={}.","Is there an items=[] API?","No — compose Menu.Item children. Older pattern docs that pass items are outdated.","textAndLabels",[92,93],"aria",[91],"keyboard",[88,89,90],"wcag",[80,81],{"_82":86,"_84":87},{"_82":83,"_84":85},"label","4.1.2 Name, Role, Value","url","https://www.w3.org/WAI/WCAG21/Understanding/name-role-value","2.1.1 Keyboard","https://www.w3.org/WAI/WCAG21/Understanding/keyboard","Enter / Space on Trigger opens.","Arrow keys move between items; Enter activates.","Escape closes; submenu arrows open nested menus.","Built on Base UI Menu — roles and aria-expanded are handled by the primitives.","Every item needs a Label (or equivalent accessible name).","Danger items should still read clearly without relying on color alone.",{"_95":96,"_97":98},"title","Labels","items",[99,100],"Start with verbs for actions ('Export summary', 'Cancel visit').","Keep labels short; put detail in Description when needed.",{"_95":112,"_97":113},{"_95":108,"_97":109},{"_95":104,"_97":105},"Outside menu roots",[106,107],"Menu.Item can render as a ListItem when used outside Menu root context.","Inside a Menu root it wires Base UI menu item behavior automatically.","Positioning",[110,111],"Content accepts align, side, sideOffset, alignOffset, and keepMounted.","SubmenuContent defaults to side=\"right\" with a fixed offset.","Compound parts",[114,115],"Menu (Root), Trigger, Backdrop, Content, Item, Separator, SubmenuRoot, SubmenuTrigger, SubmenuContent.","Menu.Item merges ListItem slots: Label, Description, LeftIcon, RightIcon, Left, Right, Submenu.",{"_120":127,"_122":134,"_50":135,"_125":136},{"_120":121,"_122":131,"_50":132,"_125":133},{"_120":127,"_122":128,"_50":129,"_125":130},{"_120":121,"_122":123,"_50":124,"_125":126},"type","dont","imageAlt","Menu items without labels","Don't omit Menu.Item.Label — every item needs a clear name.","code","\n Open} />\n \n \n \n \n \n","do","Trigger rendered as a Button via render prop","Compose Trigger with render={} />\n \n \n Print summary\n \n \n","Menu used as the primary site navigation","Don't use Menu as the app's primary navigation — use NavigationItem.","\n Navigate} />\n \n \n Home\n \n \n Patients\n \n \n Settings\n \n \n","Menu with grouped actions and a danger item last","Group related actions and place destructive items last with danger.","\n Row actions} />\n \n \n Open chart\n \n \n Add follow-up\n \n \n \n Cancel visit\n \n \n",{"_48":154,"_50":155,"_125":156},{"_48":151,"_50":152,"_125":153},{"_48":148,"_50":149,"_125":150},{"_48":145,"_50":146,"_125":147},{"_48":142,"_50":143,"_125":144},"Disabled item","disabled on Menu.Item prevents selection.","\n Open} />\n \n \n \n Locked action\n \n \n Available action\n \n \n","Submenu","Nest Menu.SubmenuRoot with SubmenuTrigger and SubmenuContent.","\n Share} />\n \n \n \n Edit\n \n \n \n \n Share\n \n \n \n Copy link\n \n \n Send via email\n \n \n \n \n","With descriptions","Label + Description for denser option lists.","\n Select code} />\n \n \n ICD-10: M54.5\n Low back pain\n \n \n ICD-10: M25.511\n Pain in right shoulder\n \n \n","With icons and shortcuts","LeftIcon, Label, and Right slots compose each row.","\n More} />\n \n \n \n Copy link\n ⌘C\n \n \n \n Delete draft\n \n \n","Basic","Root + Trigger + Content + Item compound API.","\n Actions} />\n \n \n Duplicate encounter\n \n \n Export summary\n \n \n","whenToUse",[164,165,166],"whenNotToUse",[161,162,163],"For primary page navigation — use NavigationItem or Link.","For a single action — use Button.","For form field selection — use Select.","For contextual actions anchored to a control (row menus, overflow, profile).","When several related actions should stay off the main chrome until needed.","For nested action groups via SubmenuRoot / SubmenuTrigger / SubmenuContent.","

\n \n \n Edit visit\n \n \n \n Share note\n \n

\n \n \n Delete draft\n \n

","pins",[170,171,172,173],{"_174":190,"_176":177,"_178":191,"_48":188,"_50":189},{"_174":186,"_176":177,"_178":187,"_48":188,"_50":189},{"_174":182,"_176":177,"_178":183,"_48":184,"_50":185},{"_174":175,"_176":177,"_178":179,"_48":180,"_50":181},"number",4,"x",50,"y",85,"Danger item","Menu.Item with danger for destructive actions.",3,68,"Separator","Divider that groups related actions.",2,48,"Item","Menu.Item with slotted Label / icons — renders as ListItem outside Menu root.",1,22,{"_95":154,"_125":197},{"_95":148,"_125":196},{"_95":145,"_125":195},"\n Open} />\n \n \n \n Edit\n \n \n \n \n Share\n \n \n \n Copy link\n \n \n Send via email\n \n \n \n \n","\n Diagnosis codes} />\n \n \n ICD-10: M54.5\n Low back pain\n \n \n ICD-10: M25.511\n Pain in right shoulder\n \n \n","\n Open menu} />\n \n \n \n Favorite\n \n \n \n Save to library\n \n \n \n \n Delete draft\n ⌘⇧D\n \n \n",{"_199":200,"_9":201},"displayName","Menu",[202,203,204,205,206,207,208,209,210,211,212,213,214,215,216],{"_48":262,"_120":263,"_219":220,"_50":264},{"_48":260,"_120":231,"_219":220,"_50":261,"_233":234},{"_48":258,"_120":231,"_219":220,"_50":259},{"_48":256,"_120":231,"_219":220,"_50":257,"_233":251},{"_48":254,"_120":231,"_219":220,"_50":255,"_233":251},{"_48":252,"_120":231,"_219":220,"_50":253,"_233":234},{"_48":249,"_120":231,"_219":220,"_50":250,"_233":251},{"_48":246,"_120":247,"_219":220,"_50":248},{"_48":243,"_120":244,"_219":220,"_50":245},{"_48":235,"_120":236,"_219":220,"_50":237,"_233":238,"_239":240},{"_48":230,"_120":231,"_219":220,"_50":232,"_233":234},{"_48":227,"_120":228,"_219":220,"_50":229},{"_48":225,"_120":223,"_219":220,"_50":226},{"_48":222,"_120":223,"_219":220,"_50":224},{"_48":217,"_120":218,"_219":220,"_50":221},"handle","MenuHandle","required",false,"A handle to associate the menu with a trigger.\nIf specified, allows external triggers to control the menu's open state.","defaultTriggerId","string | null","ID of the trigger that the menu is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open menu.","triggerId","ID of the trigger that the menu is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled menu.\nThere's no need to specify this prop when the menu is uncontrolled (that is, when the `open` prop is not set).","actionsRef","RefObject","A ref to imperative actions.\n- `unmount`: Manually unmounts the menu.\n Call this after any externally controlled closing animation finishes.\n- `close`: When specified, the menu can be closed imperatively.","closeParentOnEsc","boolean","When in a submenu, determines whether pressing the Escape key\ncloses the entire menu, or only the current child menu.","defaultValue","false","orientation","\"horizontal\" | \"vertical\"","The visual orientation of the menu.\nControls whether roving focus uses up/down or left/right arrow keys.","'vertical'","options",[241,242],"\"horizontal\"","\"vertical\"","onOpenChangeComplete","((open: boolean) => void)","Event handler called after any animations complete when the menu is opened or closed.","onOpenChange","((open: boolean, eventDetails: MenuRootChangeEventDetails) => void)","Event handler called when the menu is opened or closed.","loopFocus","Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys.","true","defaultOpen","Whether the menu is initially open.\n\nTo render a controlled menu, use the `open` prop instead.","highlightItemOnHover","Whether moving the pointer over items should highlight them.\nDisabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.","modal","Determines if the menu enters a modal state when open.\n- `true`: user interaction is limited to the menu: document page scroll is locked and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed.\n\nOn touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.\n\nNested menus ignore this prop, and menus opened by hover are never modal.","open","Whether the menu is currently open.","disabled","Whether the component should ignore user interaction.","children","ReactNode | PayloadChildRenderFunction","The content of the menu.\nThis can be a regular React node or a render function that receives the `payload` of the active trigger.","menu","Menus are interactive elevated surfaces that house a variety of actions or category of actions the user can take. Submenus are supported for flexibility in menu content organization.","status","stable","category","importPath","menu/menu","storyPath","menu/menu.stories"]

Anatomy

Variants

Usage Guidelines

Behaviors

Content Guidelines

Accessibility

FAQs

Related