[{"data":1,"prerenderedAt":1208},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fcontext-menu":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fcontext-menu":1203},[4,31,178],{"title":5,"path":6,"stem":7,"children":8,"page":30},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[9,14,18,22,26],{"title":10,"path":11,"stem":12,"status":13,"badge":13},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction",null,{"title":15,"path":16,"stem":17,"status":13,"badge":13},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",{"title":19,"path":20,"stem":21,"status":13,"badge":13},"Theming","\u002Fdocs\u002Fgetting-started\u002Ftheming","docs\u002F1.getting-started\u002F3.theming",{"title":23,"path":24,"stem":25,"status":13,"badge":13},"Accessibility & reduced motion","\u002Fdocs\u002Fgetting-started\u002Faccessibility","docs\u002F1.getting-started\u002F4.accessibility",{"title":27,"path":28,"stem":29,"status":13,"badge":13},"Sound","\u002Fdocs\u002Fgetting-started\u002Fsound","docs\u002F1.getting-started\u002F5.sound",false,{"title":32,"path":33,"stem":34,"children":35,"page":30},"Components","\u002Fdocs\u002Fcomponents","docs\u002F2.components",[36,40,44,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,126,130,134,138,142,146,150,154,158,162,166,170,174],{"title":37,"path":38,"stem":39,"status":13,"badge":13},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002F2.components\u002F01.button",{"title":41,"path":42,"stem":43,"status":13,"badge":13},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002F2.components\u002F02.spinner",{"title":45,"path":46,"stem":47,"status":13,"badge":48},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002F2.components\u002F03.toggle","experimental",{"title":50,"path":51,"stem":52,"status":13,"badge":13},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002F2.components\u002F04.switch",{"title":54,"path":55,"stem":56,"status":13,"badge":13},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002F2.components\u002F05.checkbox",{"title":58,"path":59,"stem":60,"status":13,"badge":13},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002F2.components\u002F06.radio-group",{"title":62,"path":63,"stem":64,"status":13,"badge":48},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002F2.components\u002F07.input",{"title":66,"path":67,"stem":68,"status":13,"badge":13},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002F2.components\u002F08.slider",{"title":70,"path":71,"stem":72,"status":13,"badge":13},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002F2.components\u002F09.progress",{"title":74,"path":75,"stem":76,"status":13,"badge":48},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002F2.components\u002F10.select",{"title":78,"path":79,"stem":80,"status":13,"badge":13},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002F2.components\u002F11.popover",{"title":82,"path":83,"stem":84,"status":13,"badge":13},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002F2.components\u002F12.dropdown-menu",{"title":86,"path":87,"stem":88,"status":13,"badge":13},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002F2.components\u002F13.tooltip",{"title":90,"path":91,"stem":92,"status":13,"badge":13},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002F2.components\u002F14.tabs",{"title":94,"path":95,"stem":96,"status":13,"badge":48},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002F2.components\u002F15.accordion",{"title":98,"path":99,"stem":100,"status":13,"badge":48},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002F2.components\u002F16.dialog",{"title":102,"path":103,"stem":104,"status":13,"badge":48},"Alert Dialog","\u002Fdocs\u002Fcomponents\u002Falert-dialog","docs\u002F2.components\u002F17.alert-dialog",{"title":106,"path":107,"stem":108,"status":13,"badge":48},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002F2.components\u002F18.sheet",{"title":110,"path":111,"stem":112,"status":13,"badge":48},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002F2.components\u002F19.drawer",{"title":114,"path":115,"stem":116,"status":13,"badge":13},"Toaster","\u002Fdocs\u002Fcomponents\u002Ftoaster","docs\u002F2.components\u002F20.toaster",{"title":118,"path":119,"stem":120,"status":13,"badge":48},"Page transition","\u002Fdocs\u002Fcomponents\u002Fpage-transition","docs\u002F2.components\u002F21.page-transition",{"title":122,"path":123,"stem":124,"status":125,"badge":13},"Blob","\u002Fdocs\u002Fcomponents\u002Fblob","docs\u002F2.components\u002F22.blob","soon",{"title":127,"path":128,"stem":129,"status":13,"badge":48},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002F2.components\u002F23.command",{"title":131,"path":132,"stem":133,"status":13,"badge":48},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002F2.components\u002F24.combobox",{"title":135,"path":136,"stem":137,"status":13,"badge":48},"NumberField","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002F2.components\u002F25.number-field",{"title":139,"path":140,"stem":141,"status":13,"badge":48},"InputOTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002F2.components\u002F26.input-otp",{"title":143,"path":144,"stem":145,"status":13,"badge":48},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002F2.components\u002F27.hover-card",{"title":147,"path":148,"stem":149,"status":13,"badge":48},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002F2.components\u002F28.context-menu",{"title":151,"path":152,"stem":153,"status":13,"badge":48},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002F2.components\u002F29.skeleton",{"title":155,"path":156,"stem":157,"status":13,"badge":48},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002F2.components\u002F30.badge",{"title":159,"path":160,"stem":161,"status":13,"badge":48},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002F2.components\u002F31.card",{"title":163,"path":164,"stem":165,"status":13,"badge":48},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002F2.components\u002F32.avatar",{"title":167,"path":168,"stem":169,"status":13,"badge":48},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002F2.components\u002F33.separator",{"title":171,"path":172,"stem":173,"status":13,"badge":48},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002F2.components\u002F34.label",{"title":175,"path":176,"stem":177,"status":13,"badge":48},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002F2.components\u002F35.sidebar",{"title":179,"path":180,"stem":181,"children":182,"page":30},"Core","\u002Fdocs\u002Fcore","docs\u002F3.core",[183],{"title":184,"path":185,"stem":186,"status":13,"badge":13},"API reference","\u002Fdocs\u002Fcore\u002Fapi","docs\u002F3.core\u002F1.api",{"id":188,"title":147,"badge":48,"body":189,"description":1198,"extension":1199,"meta":1200,"navigation":509,"path":148,"seo":1201,"status":13,"stem":149,"__hash__":1202},"docs\u002Fdocs\u002F2.components\u002F28.context-menu.md",{"type":190,"value":191,"toc":1184},"minimark",[192,200,220,233,237,242,267,309,340,344,358,386,390,753,815,819,909,913,927,973,977,988,992,995,1116,1126,1130,1147,1151,1163,1168,1172,1180],[193,194,197],"playground",{"caption":195,"name":196},"Right-click the area (long-press on touch), then move between items.","context-menu",[198,199],"demo-context-menu",{},[201,202,204],"callout",{"type":203},"alpha",[205,206,207,211,212,215,216,219],"p",{},[208,209,210],"code",{},"@goopui\u002Fvue"," and ",[208,213,214],{},"@goopui\u002Fnuxt"," are in alpha, so APIs may still change. Context Menu is new and experimental: its props may still change. The menu on this page is the real ",[208,217,218],{},"GoopContextMenu",".",[205,221,222,224,225,232],{},[208,223,218],{}," wraps the same ",[226,227,231],"a",{"href":228,"rel":229},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Fcontext-menu",[230],"nofollow","reka-ui Context Menu"," primitive as shadcn-vue's ContextMenu, with the same API. Right-click and long-press, keyboard navigation, typeahead, focus handling, and positioning work the same. Swap the imports and you're done.",[234,235,15],"h2",{"id":236},"installation",[238,239,241],"h3",{"id":240},"nuxt","Nuxt",[243,244,249],"pre",{"className":245,"code":246,"language":247,"meta":248,"style":248},"language-bash shiki shiki-themes github-light github-dark","pnpm add @goopui\u002Fnuxt\n","bash","",[208,250,251],{"__ignoreMap":248},[252,253,256,260,264],"span",{"class":254,"line":255},"line",1,[252,257,259],{"class":258},"sScJk","pnpm",[252,261,263],{"class":262},"sZZnC"," add",[252,265,266],{"class":262}," @goopui\u002Fnuxt\n",[243,268,273],{"className":269,"code":270,"filename":271,"language":272,"meta":248,"style":248},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n})\n","nuxt.config.ts","ts",[208,274,275,291,303],{"__ignoreMap":248},[252,276,277,281,284,287],{"class":254,"line":255},[252,278,280],{"class":279},"szBVR","export",[252,282,283],{"class":279}," default",[252,285,286],{"class":258}," defineNuxtConfig",[252,288,290],{"class":289},"sVt8B","({\n",[252,292,294,297,300],{"class":254,"line":293},2,[252,295,296],{"class":289},"  modules: [",[252,298,299],{"class":262},"'@goopui\u002Fnuxt'",[252,301,302],{"class":289},"],\n",[252,304,306],{"class":254,"line":305},3,[252,307,308],{"class":289},"})\n",[205,310,311,312,315,316,319,320,323,324,323,327,323,330,323,333,323,336,339],{},"The module auto-imports every ",[208,313,314],{},"GoopContextMenu*"," part, adds ",[208,317,318],{},"goop.css",", and points Tailwind at the component classes. It needs Tailwind CSS v4 and the shadcn tokens (",[208,321,322],{},"--popover",", ",[208,325,326],{},"--popover-foreground",[208,328,329],{},"--accent",[208,331,332],{},"--destructive",[208,334,335],{},"--ring",[208,337,338],{},"--radius",").",[238,341,343],{"id":342},"vue","Vue",[243,345,347],{"className":245,"code":346,"language":247,"meta":248,"style":248},"pnpm add @goopui\u002Fvue\n",[208,348,349],{"__ignoreMap":248},[252,350,351,353,355],{"class":254,"line":255},[252,352,259],{"class":258},[252,354,263],{"class":262},[252,356,357],{"class":262}," @goopui\u002Fvue\n",[243,359,364],{"className":360,"code":361,"filename":362,"language":363,"meta":248,"style":248},"language-css shiki shiki-themes github-light github-dark","@import \"tailwindcss\";\n@import \"@goopui\u002Fvue\u002Fgoop.css\";\n","main.css","css",[208,365,366,377],{"__ignoreMap":248},[252,367,368,371,374],{"class":254,"line":255},[252,369,370],{"class":279},"@import",[252,372,373],{"class":262}," \"tailwindcss\"",[252,375,376],{"class":289},";\n",[252,378,379,381,384],{"class":254,"line":293},[252,380,370],{"class":279},[252,382,383],{"class":262}," \"@goopui\u002Fvue\u002Fgoop.css\"",[252,385,376],{"class":289},[234,387,389],{"id":388},"usage","Usage",[243,391,394],{"className":392,"code":393,"language":342,"meta":248,"style":248},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\nimport {\n  GoopContextMenu,\n  GoopContextMenuContent,\n  GoopContextMenuItem,\n  GoopContextMenuShortcut,\n  GoopContextMenuSub,\n  GoopContextMenuSubContent,\n  GoopContextMenuSubTrigger,\n  GoopContextMenuTrigger,\n} from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopContextMenu>\n    \u003CGoopContextMenuTrigger class=\"flex h-44 items-center justify-center rounded-lg border border-dashed\">\n      Right-click here\n    \u003C\u002FGoopContextMenuTrigger>\n    \u003CGoopContextMenuContent class=\"w-52\">\n      \u003CGoopContextMenuItem>Back \u003CGoopContextMenuShortcut>⌘[\u003C\u002FGoopContextMenuShortcut>\u003C\u002FGoopContextMenuItem>\n      \u003CGoopContextMenuItem>Reload \u003CGoopContextMenuShortcut>⌘R\u003C\u002FGoopContextMenuShortcut>\u003C\u002FGoopContextMenuItem>\n      \u003CGoopContextMenuSub>\n        \u003CGoopContextMenuSubTrigger>More tools\u003C\u002FGoopContextMenuSubTrigger>\n        \u003CGoopContextMenuSubContent class=\"w-44\">\n          \u003CGoopContextMenuItem>Save page…\u003C\u002FGoopContextMenuItem>\n          \u003CGoopContextMenuItem>Developer tools\u003C\u002FGoopContextMenuItem>\n        \u003C\u002FGoopContextMenuSubContent>\n      \u003C\u002FGoopContextMenuSub>\n    \u003C\u002FGoopContextMenuContent>\n  \u003C\u002FGoopContextMenu>\n\u003C\u002Ftemplate>\n",[208,395,396,420,426,434,440,446,452,458,464,470,476,482,494,504,511,521,531,550,556,566,583,610,633,643,659,676,691,705,715,725,734,744],{"__ignoreMap":248},[252,397,398,401,405,408,411,414,417],{"class":254,"line":255},[252,399,400],{"class":289},"\u003C",[252,402,404],{"class":403},"s9eBZ","script",[252,406,407],{"class":258}," setup",[252,409,410],{"class":258}," lang",[252,412,413],{"class":289},"=",[252,415,416],{"class":262},"\"ts\"",[252,418,419],{"class":289},">\n",[252,421,422],{"class":254,"line":293},[252,423,425],{"class":424},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\n",[252,427,428,431],{"class":254,"line":305},[252,429,430],{"class":279},"import",[252,432,433],{"class":289}," {\n",[252,435,437],{"class":254,"line":436},4,[252,438,439],{"class":289},"  GoopContextMenu,\n",[252,441,443],{"class":254,"line":442},5,[252,444,445],{"class":289},"  GoopContextMenuContent,\n",[252,447,449],{"class":254,"line":448},6,[252,450,451],{"class":289},"  GoopContextMenuItem,\n",[252,453,455],{"class":254,"line":454},7,[252,456,457],{"class":289},"  GoopContextMenuShortcut,\n",[252,459,461],{"class":254,"line":460},8,[252,462,463],{"class":289},"  GoopContextMenuSub,\n",[252,465,467],{"class":254,"line":466},9,[252,468,469],{"class":289},"  GoopContextMenuSubContent,\n",[252,471,473],{"class":254,"line":472},10,[252,474,475],{"class":289},"  GoopContextMenuSubTrigger,\n",[252,477,479],{"class":254,"line":478},11,[252,480,481],{"class":289},"  GoopContextMenuTrigger,\n",[252,483,485,488,491],{"class":254,"line":484},12,[252,486,487],{"class":289},"} ",[252,489,490],{"class":279},"from",[252,492,493],{"class":262}," '@goopui\u002Fvue'\n",[252,495,497,500,502],{"class":254,"line":496},13,[252,498,499],{"class":289},"\u003C\u002F",[252,501,404],{"class":403},[252,503,419],{"class":289},[252,505,507],{"class":254,"line":506},14,[252,508,510],{"emptyLinePlaceholder":509},true,"\n",[252,512,514,516,519],{"class":254,"line":513},15,[252,515,400],{"class":289},[252,517,518],{"class":403},"template",[252,520,419],{"class":289},[252,522,524,527,529],{"class":254,"line":523},16,[252,525,526],{"class":289},"  \u003C",[252,528,218],{"class":403},[252,530,419],{"class":289},[252,532,534,537,540,543,545,548],{"class":254,"line":533},17,[252,535,536],{"class":289},"    \u003C",[252,538,539],{"class":403},"GoopContextMenuTrigger",[252,541,542],{"class":258}," class",[252,544,413],{"class":289},[252,546,547],{"class":262},"\"flex h-44 items-center justify-center rounded-lg border border-dashed\"",[252,549,419],{"class":289},[252,551,553],{"class":254,"line":552},18,[252,554,555],{"class":289},"      Right-click here\n",[252,557,559,562,564],{"class":254,"line":558},19,[252,560,561],{"class":289},"    \u003C\u002F",[252,563,539],{"class":403},[252,565,419],{"class":289},[252,567,569,571,574,576,578,581],{"class":254,"line":568},20,[252,570,536],{"class":289},[252,572,573],{"class":403},"GoopContextMenuContent",[252,575,542],{"class":258},[252,577,413],{"class":289},[252,579,580],{"class":262},"\"w-52\"",[252,582,419],{"class":289},[252,584,586,589,592,595,598,601,603,606,608],{"class":254,"line":585},21,[252,587,588],{"class":289},"      \u003C",[252,590,591],{"class":403},"GoopContextMenuItem",[252,593,594],{"class":289},">Back \u003C",[252,596,597],{"class":403},"GoopContextMenuShortcut",[252,599,600],{"class":289},">⌘[\u003C\u002F",[252,602,597],{"class":403},[252,604,605],{"class":289},">\u003C\u002F",[252,607,591],{"class":403},[252,609,419],{"class":289},[252,611,613,615,617,620,622,625,627,629,631],{"class":254,"line":612},22,[252,614,588],{"class":289},[252,616,591],{"class":403},[252,618,619],{"class":289},">Reload \u003C",[252,621,597],{"class":403},[252,623,624],{"class":289},">⌘R\u003C\u002F",[252,626,597],{"class":403},[252,628,605],{"class":289},[252,630,591],{"class":403},[252,632,419],{"class":289},[252,634,636,638,641],{"class":254,"line":635},23,[252,637,588],{"class":289},[252,639,640],{"class":403},"GoopContextMenuSub",[252,642,419],{"class":289},[252,644,646,649,652,655,657],{"class":254,"line":645},24,[252,647,648],{"class":289},"        \u003C",[252,650,651],{"class":403},"GoopContextMenuSubTrigger",[252,653,654],{"class":289},">More tools\u003C\u002F",[252,656,651],{"class":403},[252,658,419],{"class":289},[252,660,662,664,667,669,671,674],{"class":254,"line":661},25,[252,663,648],{"class":289},[252,665,666],{"class":403},"GoopContextMenuSubContent",[252,668,542],{"class":258},[252,670,413],{"class":289},[252,672,673],{"class":262},"\"w-44\"",[252,675,419],{"class":289},[252,677,679,682,684,687,689],{"class":254,"line":678},26,[252,680,681],{"class":289},"          \u003C",[252,683,591],{"class":403},[252,685,686],{"class":289},">Save page…\u003C\u002F",[252,688,591],{"class":403},[252,690,419],{"class":289},[252,692,694,696,698,701,703],{"class":254,"line":693},27,[252,695,681],{"class":289},[252,697,591],{"class":403},[252,699,700],{"class":289},">Developer tools\u003C\u002F",[252,702,591],{"class":403},[252,704,419],{"class":289},[252,706,708,711,713],{"class":254,"line":707},28,[252,709,710],{"class":289},"        \u003C\u002F",[252,712,666],{"class":403},[252,714,419],{"class":289},[252,716,718,721,723],{"class":254,"line":717},29,[252,719,720],{"class":289},"      \u003C\u002F",[252,722,640],{"class":403},[252,724,419],{"class":289},[252,726,728,730,732],{"class":254,"line":727},30,[252,729,561],{"class":289},[252,731,573],{"class":403},[252,733,419],{"class":289},[252,735,737,740,742],{"class":254,"line":736},31,[252,738,739],{"class":289},"  \u003C\u002F",[252,741,218],{"class":403},[252,743,419],{"class":289},[252,745,747,749,751],{"class":254,"line":746},32,[252,748,499],{"class":289},[252,750,518],{"class":403},[252,752,419],{"class":289},[205,754,755,756,323,758,323,761,323,764,323,767,323,769,772,773,323,776,779,780,323,783,323,786,323,789,323,791,323,794,323,797,323,800,803,804,807,808,810,811,211,813,219],{},"The parts mirror shadcn-vue's: ",[208,757,218],{},[208,759,760],{},"Trigger",[208,762,763],{},"Content",[208,765,766],{},"Group",[208,768,171],{},[208,770,771],{},"Item"," (",[208,774,775],{},"inset",[208,777,778],{},"variant=\"destructive\"","), ",[208,781,782],{},"CheckboxItem",[208,784,785],{},"RadioGroup",[208,787,788],{},"RadioItem",[208,790,167],{},[208,792,793],{},"Shortcut",[208,795,796],{},"Sub",[208,798,799],{},"SubTrigger",[208,801,802],{},"SubContent",", and ",[208,805,806],{},"Portal",", each prefixed with ",[208,809,218],{},". The goo lives on ",[208,812,573],{},[208,814,666],{},[234,816,818],{"id":817},"behavior","Behavior",[820,821,822,841,859,877,890,899],"ul",{},[823,824,825,829,830,323,833,836,837,840],"li",{},[826,827,828],"strong",{},"Bloom from the pointer."," A context menu has no button to grow out of, so it grows out of the spot you clicked: the menu pools from a droplet at the pointer, spreads with a lobed edge, overshoots, and wobbles to rest (",[208,831,832],{},"wobble",[208,834,835],{},"openSlosh","). Then it splashes drops all around (",[208,838,839],{},"openDrips","). A menu that flips to the left of or above the pointer near the screen edge grows from its corner nearest the pointer.",[823,842,843,846,847,323,850,323,853,855,856,339],{},[826,844,845],{},"Highlight."," The highlighted item's background is a goo blob. It glides between items with a stretch and a neck, overshoots when it lands, and follows the keyboard as well as the pointer (",[208,848,849],{},"highlight",[208,851,852],{},"momentum",[208,854,832],{},"). Its swell leans toward the pointer with a little lag (",[208,857,858],{},"followPointer",[823,860,861,864,865,868,869,872,873,876],{},[826,862,863],{},"Select."," Choosing an item squishes the blob (",[208,866,867],{},"pop","), then the menu closes once the pop has played. ",[208,870,871],{},"event.preventDefault()"," in your ",[208,874,875],{},"@select"," still keeps it open.",[823,878,879,882,883,886,887,889],{},[826,880,881],{},"Submenus."," A submenu blooms out of its parent item and has its own highlight (",[208,884,885],{},"submenus","). Engine props you leave unset on ",[208,888,666],{}," are inherited from the parent menu.",[823,891,892,895,896,339],{},[826,893,894],{},"Close."," The menu pulls in, wobbles, and shrinks back to the point it grew from (",[208,897,898],{},"closeSlosh",[823,900,901,904,905,908],{},[826,902,903],{},"Content stays sharp."," The menu's background, ring, and shadow are drawn on an ",[208,906,907],{},"aria-hidden"," surface behind the items, so the text is never filtered.",[234,910,912],{"id":911},"bloom-origin","Bloom origin",[205,914,915,918,919,922,923,926],{},[208,916,917],{},"bloomFrom"," picks where the bloom starts: ",[208,920,921],{},"'pointer'"," (the default: the right-click or long-press point; a submenu blooms from its item) or ",[208,924,925],{},"'center'"," (the panel's own center, like Dropdown Menu).",[243,928,930],{"className":392,"code":929,"language":342,"meta":248,"style":248},"\u003CGoopContextMenuContent>...\u003C\u002FGoopContextMenuContent>                      \u003C!-- from the pointer -->\n\u003CGoopContextMenuContent bloom-from=\"center\">...\u003C\u002FGoopContextMenuContent>  \u003C!-- from its center -->\n",[208,931,932,949],{"__ignoreMap":248},[252,933,934,936,938,941,943,946],{"class":254,"line":255},[252,935,400],{"class":289},[252,937,573],{"class":403},[252,939,940],{"class":289},">...\u003C\u002F",[252,942,573],{"class":403},[252,944,945],{"class":289},">                      ",[252,947,948],{"class":424},"\u003C!-- from the pointer -->\n",[252,950,951,953,955,958,960,963,965,967,970],{"class":254,"line":293},[252,952,400],{"class":289},[252,954,573],{"class":403},[252,956,957],{"class":258}," bloom-from",[252,959,413],{"class":289},[252,961,962],{"class":262},"\"center\"",[252,964,940],{"class":289},[252,966,573],{"class":403},[252,968,969],{"class":289},">  ",[252,971,972],{"class":424},"\u003C!-- from its center -->\n",[234,974,976],{"id":975},"surface-color","Surface color",[205,978,979,980,983,984,987],{},"The trigger is an area, not a button, so the menu defaults to ",[208,981,982],{},"surface=\"popover\"",": shadcn's popover tokens. ",[208,985,986],{},"'trigger'"," takes the area's colors, and any CSS color works too. Submenus reuse their parent's color.",[234,989,991],{"id":990},"turning-parts-off","Turning parts off",[205,993,994],{},"Every effect is its own boolean, and they all default to on:",[243,996,998],{"className":392,"code":997,"language":342,"meta":248,"style":248},"\u003CGoopContextMenuContent :highlight=\"false\">...\u003C\u002FGoopContextMenuContent>   \u003C!-- shadcn's flat highlight -->\n\u003CGoopContextMenuContent :pop=\"false\">...\u003C\u002FGoopContextMenuContent>         \u003C!-- closes right away -->\n\u003CGoopContextMenuContent :submenus=\"false\">...\u003C\u002FGoopContextMenuContent>    \u003C!-- plain shadcn submenus -->\n\u003CGoopContextMenuContent :open-drips=\"false\">...\u003C\u002FGoopContextMenuContent>  \u003C!-- no splash -->\n",[208,999,1000,1032,1060,1088],{"__ignoreMap":248},[252,1001,1002,1004,1006,1009,1011,1013,1016,1020,1022,1024,1026,1029],{"class":254,"line":255},[252,1003,400],{"class":289},[252,1005,573],{"class":403},[252,1007,1008],{"class":289}," :",[252,1010,849],{"class":258},[252,1012,413],{"class":289},[252,1014,1015],{"class":262},"\"",[252,1017,1019],{"class":1018},"sj4cs","false",[252,1021,1015],{"class":262},[252,1023,940],{"class":289},[252,1025,573],{"class":403},[252,1027,1028],{"class":289},">   ",[252,1030,1031],{"class":424},"\u003C!-- shadcn's flat highlight -->\n",[252,1033,1034,1036,1038,1040,1042,1044,1046,1048,1050,1052,1054,1057],{"class":254,"line":293},[252,1035,400],{"class":289},[252,1037,573],{"class":403},[252,1039,1008],{"class":289},[252,1041,867],{"class":258},[252,1043,413],{"class":289},[252,1045,1015],{"class":262},[252,1047,1019],{"class":1018},[252,1049,1015],{"class":262},[252,1051,940],{"class":289},[252,1053,573],{"class":403},[252,1055,1056],{"class":289},">         ",[252,1058,1059],{"class":424},"\u003C!-- closes right away -->\n",[252,1061,1062,1064,1066,1068,1070,1072,1074,1076,1078,1080,1082,1085],{"class":254,"line":305},[252,1063,400],{"class":289},[252,1065,573],{"class":403},[252,1067,1008],{"class":289},[252,1069,885],{"class":258},[252,1071,413],{"class":289},[252,1073,1015],{"class":262},[252,1075,1019],{"class":1018},[252,1077,1015],{"class":262},[252,1079,940],{"class":289},[252,1081,573],{"class":403},[252,1083,1084],{"class":289},">    ",[252,1086,1087],{"class":424},"\u003C!-- plain shadcn submenus -->\n",[252,1089,1090,1092,1094,1096,1099,1101,1103,1105,1107,1109,1111,1113],{"class":254,"line":436},[252,1091,400],{"class":289},[252,1093,573],{"class":403},[252,1095,1008],{"class":289},[252,1097,1098],{"class":258},"open-drips",[252,1100,413],{"class":289},[252,1102,1015],{"class":262},[252,1104,1019],{"class":1018},[252,1106,1015],{"class":262},[252,1108,940],{"class":289},[252,1110,573],{"class":403},[252,1112,969],{"class":289},[252,1114,1115],{"class":424},"\u003C!-- no splash -->\n",[205,1117,1118,1121,1122,1125],{},[208,1119,1120],{},":goo=\"false\""," renders exactly shadcn's ",[208,1123,1124],{},"ContextMenuContent",", with its own enter and exit animation.",[234,1127,1129],{"id":1128},"driving-it-from-code","Driving it from code",[205,1131,1132,211,1134,1136,1137,1140,1141,772,1143,1146],{},[208,1133,573],{},[208,1135,666],{}," expose their engine handle as ",[208,1138,1139],{},"handle"," and the highlight handle as ",[208,1142,849],{},[208,1144,1145],{},"null"," before they mount, or when that part is off). The menu only exists while open.",[234,1148,1150],{"id":1149},"props","Props",[205,1152,1153,1154,211,1156,1158,1159,1162],{},"The root, trigger, items, labels, groups, separators, and submenu parts take shadcn-vue's props. ",[208,1155,573],{},[208,1157,666],{}," take reka-ui's props, ",[208,1160,1161],{},"class",", and these goo props.",[1164,1165],"component-props",{"name":196,"part":1166},[1167],"content",[234,1169,1171],{"id":1170},"accessibility","Accessibility",[205,1173,1174,1175,1177,1178,219],{},"Keyboard navigation, typeahead, focus handling, and ARIA attributes come from reka-ui. The goo surface and the highlight blob are ",[208,1176,907],{}," and can't be clicked, and the items are never filtered. Under reduced motion the menu opens and closes plainly: it keeps its goo shape and color, but the bloom, slosh, and splash are off, the highlight snaps between items, and there's no pop. See ",[226,1179,23],{"href":24},[1181,1182,1183],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":248,"searchDepth":305,"depth":305,"links":1185},[1186,1190,1191,1192,1193,1194,1195,1196,1197],{"id":236,"depth":293,"text":15,"children":1187},[1188,1189],{"id":240,"depth":305,"text":241},{"id":342,"depth":305,"text":343},{"id":388,"depth":293,"text":389},{"id":817,"depth":293,"text":818},{"id":911,"depth":293,"text":912},{"id":975,"depth":293,"text":976},{"id":990,"depth":293,"text":991},{"id":1128,"depth":293,"text":1129},{"id":1149,"depth":293,"text":1150},{"id":1170,"depth":293,"text":1171},"shadcn's Context Menu with goo. The menu blooms out of the spot you right-clicked, the highlight is a blob that glides between items, and submenus bloom out of their item.","md",{},{"title":147,"description":1198},"fKs-eXOnIyPWHlOG2zbgvdzlOi_PN7AFf4h6FtL1XmA",[1204,1206],{"title":143,"path":144,"stem":145,"description":1205,"children":-1},"shadcn's Hover Card with goo. The card blooms out of the edge facing its link, splashes, and shrinks back into it.",{"title":151,"path":152,"stem":153,"description":1207,"children":-1},"shadcn's Skeleton with a slow goo shimmer instead of the grey pulse. A soft, low mound of lighter goo drifts across each shape.",1793670386982]