[{"data":1,"prerenderedAt":1405},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fdropdown-menu":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fdropdown-menu":1400},[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":82,"badge":13,"body":189,"description":1395,"extension":1396,"meta":1397,"navigation":519,"path":83,"seo":1398,"status":13,"stem":84,"__hash__":1399},"docs\u002Fdocs\u002F2.components\u002F12.dropdown-menu.md",{"type":190,"value":191,"toc":1379},"minimark",[192,201,221,234,238,243,268,310,344,348,362,390,394,769,824,828,894,898,905,912,990,993,1040,1045,1055,1059,1070,1115,1119,1143,1190,1194,1197,1202,1288,1294,1298,1314,1318,1357,1362,1366,1375],[193,194,197],"playground",{"caption":195,"name":196},"Open it, then use the arrow keys or move the pointer between items.","dropdown-menu",[198,199],"demo-dropdown-menu",{"set":200},"basic",[202,203,205],"callout",{"type":204},"alpha",[206,207,208,212,213,216,217,220],"p",{},[209,210,211],"code",{},"@goopui\u002Fvue"," and ",[209,214,215],{},"@goopui\u002Fnuxt"," are in alpha, so APIs may still change. The menus on this page are the real ",[209,218,219],{},"GoopDropdownMenu",", and the code below is exactly what you write.",[206,222,223,225,226,233],{},[209,224,219],{}," wraps the same ",[227,228,232],"a",{"href":229,"rel":230},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Fdropdown-menu",[231],"nofollow","reka-ui Dropdown Menu"," primitive as shadcn-vue's DropdownMenu, with the same API. Keyboard navigation, typeahead, focus handling, and positioning work the same. Swap the imports and you're done.",[235,236,15],"h2",{"id":237},"installation",[239,240,242],"h3",{"id":241},"nuxt","Nuxt",[244,245,250],"pre",{"className":246,"code":247,"language":248,"meta":249,"style":249},"language-bash shiki shiki-themes github-light github-dark","pnpm add @goopui\u002Fnuxt\n","bash","",[209,251,252],{"__ignoreMap":249},[253,254,257,261,265],"span",{"class":255,"line":256},"line",1,[253,258,260],{"class":259},"sScJk","pnpm",[253,262,264],{"class":263},"sZZnC"," add",[253,266,267],{"class":263}," @goopui\u002Fnuxt\n",[244,269,274],{"className":270,"code":271,"filename":272,"language":273,"meta":249,"style":249},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n})\n","nuxt.config.ts","ts",[209,275,276,292,304],{"__ignoreMap":249},[253,277,278,282,285,288],{"class":255,"line":256},[253,279,281],{"class":280},"szBVR","export",[253,283,284],{"class":280}," default",[253,286,287],{"class":259}," defineNuxtConfig",[253,289,291],{"class":290},"sVt8B","({\n",[253,293,295,298,301],{"class":255,"line":294},2,[253,296,297],{"class":290},"  modules: [",[253,299,300],{"class":263},"'@goopui\u002Fnuxt'",[253,302,303],{"class":290},"],\n",[253,305,307],{"class":255,"line":306},3,[253,308,309],{"class":290},"})\n",[206,311,312,313,316,317,320,321,324,325,324,328,324,331,324,334,324,337,324,340,343],{},"The module auto-imports every ",[209,314,315],{},"GoopDropdownMenu*"," part, adds ",[209,318,319],{},"goop.css",", and points Tailwind at the component classes. It needs Tailwind CSS v4 and the shadcn tokens (",[209,322,323],{},"--popover",", ",[209,326,327],{},"--popover-foreground",[209,329,330],{},"--primary",[209,332,333],{},"--accent",[209,335,336],{},"--destructive",[209,338,339],{},"--ring",[209,341,342],{},"--radius",").",[239,345,347],{"id":346},"vue","Vue",[244,349,351],{"className":246,"code":350,"language":248,"meta":249,"style":249},"pnpm add @goopui\u002Fvue\n",[209,352,353],{"__ignoreMap":249},[253,354,355,357,359],{"class":255,"line":256},[253,356,260],{"class":259},[253,358,264],{"class":263},[253,360,361],{"class":263}," @goopui\u002Fvue\n",[244,363,368],{"className":364,"code":365,"filename":366,"language":367,"meta":249,"style":249},"language-css shiki shiki-themes github-light github-dark","@import \"tailwindcss\";\n@import \"@goopui\u002Fvue\u002Fgoop.css\";\n","main.css","css",[209,369,370,381],{"__ignoreMap":249},[253,371,372,375,378],{"class":255,"line":256},[253,373,374],{"class":280},"@import",[253,376,377],{"class":263}," \"tailwindcss\"",[253,379,380],{"class":290},";\n",[253,382,383,385,388],{"class":255,"line":294},[253,384,374],{"class":280},[253,386,387],{"class":263}," \"@goopui\u002Fvue\u002Fgoop.css\"",[253,389,380],{"class":290},[235,391,393],{"id":392},"usage","Usage",[244,395,398],{"className":396,"code":397,"language":346,"meta":249,"style":249},"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 from '@goopui\u002Fvue'.\nimport {\n  GoopButton,\n  GoopDropdownMenu,\n  GoopDropdownMenuContent,\n  GoopDropdownMenuGroup,\n  GoopDropdownMenuItem,\n  GoopDropdownMenuLabel,\n  GoopDropdownMenuSeparator,\n  GoopDropdownMenuShortcut,\n  GoopDropdownMenuTrigger,\n} from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopDropdownMenu>\n    \u003CGoopDropdownMenuTrigger as-child>\n      \u003CGoopButton variant=\"outline\">Open menu\u003C\u002FGoopButton>\n    \u003C\u002FGoopDropdownMenuTrigger>\n    \u003CGoopDropdownMenuContent class=\"w-48\">\n      \u003CGoopDropdownMenuLabel>My account\u003C\u002FGoopDropdownMenuLabel>\n      \u003CGoopDropdownMenuGroup>\n        \u003CGoopDropdownMenuItem>Profile \u003CGoopDropdownMenuShortcut>⇧⌘P\u003C\u002FGoopDropdownMenuShortcut>\u003C\u002FGoopDropdownMenuItem>\n        \u003CGoopDropdownMenuItem>Settings \u003CGoopDropdownMenuShortcut>⌘,\u003C\u002FGoopDropdownMenuShortcut>\u003C\u002FGoopDropdownMenuItem>\n        \u003CGoopDropdownMenuItem disabled>Billing\u003C\u002FGoopDropdownMenuItem>\n      \u003C\u002FGoopDropdownMenuGroup>\n      \u003CGoopDropdownMenuSeparator \u002F>\n      \u003CGoopDropdownMenuItem variant=\"destructive\">Log out\u003C\u002FGoopDropdownMenuItem>\n    \u003C\u002FGoopDropdownMenuContent>\n  \u003C\u002FGoopDropdownMenu>\n\u003C\u002Ftemplate>\n",[209,399,400,424,430,438,444,450,456,462,468,474,480,486,492,504,514,521,531,541,555,579,589,607,622,632,659,682,699,709,720,741,750,760],{"__ignoreMap":249},[253,401,402,405,409,412,415,418,421],{"class":255,"line":256},[253,403,404],{"class":290},"\u003C",[253,406,408],{"class":407},"s9eBZ","script",[253,410,411],{"class":259}," setup",[253,413,414],{"class":259}," lang",[253,416,417],{"class":290},"=",[253,419,420],{"class":263},"\"ts\"",[253,422,423],{"class":290},">\n",[253,425,426],{"class":255,"line":294},[253,427,429],{"class":428},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them from '@goopui\u002Fvue'.\n",[253,431,432,435],{"class":255,"line":306},[253,433,434],{"class":280},"import",[253,436,437],{"class":290}," {\n",[253,439,441],{"class":255,"line":440},4,[253,442,443],{"class":290},"  GoopButton,\n",[253,445,447],{"class":255,"line":446},5,[253,448,449],{"class":290},"  GoopDropdownMenu,\n",[253,451,453],{"class":255,"line":452},6,[253,454,455],{"class":290},"  GoopDropdownMenuContent,\n",[253,457,459],{"class":255,"line":458},7,[253,460,461],{"class":290},"  GoopDropdownMenuGroup,\n",[253,463,465],{"class":255,"line":464},8,[253,466,467],{"class":290},"  GoopDropdownMenuItem,\n",[253,469,471],{"class":255,"line":470},9,[253,472,473],{"class":290},"  GoopDropdownMenuLabel,\n",[253,475,477],{"class":255,"line":476},10,[253,478,479],{"class":290},"  GoopDropdownMenuSeparator,\n",[253,481,483],{"class":255,"line":482},11,[253,484,485],{"class":290},"  GoopDropdownMenuShortcut,\n",[253,487,489],{"class":255,"line":488},12,[253,490,491],{"class":290},"  GoopDropdownMenuTrigger,\n",[253,493,495,498,501],{"class":255,"line":494},13,[253,496,497],{"class":290},"} ",[253,499,500],{"class":280},"from",[253,502,503],{"class":263}," '@goopui\u002Fvue'\n",[253,505,507,510,512],{"class":255,"line":506},14,[253,508,509],{"class":290},"\u003C\u002F",[253,511,408],{"class":407},[253,513,423],{"class":290},[253,515,517],{"class":255,"line":516},15,[253,518,520],{"emptyLinePlaceholder":519},true,"\n",[253,522,524,526,529],{"class":255,"line":523},16,[253,525,404],{"class":290},[253,527,528],{"class":407},"template",[253,530,423],{"class":290},[253,532,534,537,539],{"class":255,"line":533},17,[253,535,536],{"class":290},"  \u003C",[253,538,219],{"class":407},[253,540,423],{"class":290},[253,542,544,547,550,553],{"class":255,"line":543},18,[253,545,546],{"class":290},"    \u003C",[253,548,549],{"class":407},"GoopDropdownMenuTrigger",[253,551,552],{"class":259}," as-child",[253,554,423],{"class":290},[253,556,558,561,564,567,569,572,575,577],{"class":255,"line":557},19,[253,559,560],{"class":290},"      \u003C",[253,562,563],{"class":407},"GoopButton",[253,565,566],{"class":259}," variant",[253,568,417],{"class":290},[253,570,571],{"class":263},"\"outline\"",[253,573,574],{"class":290},">Open menu\u003C\u002F",[253,576,563],{"class":407},[253,578,423],{"class":290},[253,580,582,585,587],{"class":255,"line":581},20,[253,583,584],{"class":290},"    \u003C\u002F",[253,586,549],{"class":407},[253,588,423],{"class":290},[253,590,592,594,597,600,602,605],{"class":255,"line":591},21,[253,593,546],{"class":290},[253,595,596],{"class":407},"GoopDropdownMenuContent",[253,598,599],{"class":259}," class",[253,601,417],{"class":290},[253,603,604],{"class":263},"\"w-48\"",[253,606,423],{"class":290},[253,608,610,612,615,618,620],{"class":255,"line":609},22,[253,611,560],{"class":290},[253,613,614],{"class":407},"GoopDropdownMenuLabel",[253,616,617],{"class":290},">My account\u003C\u002F",[253,619,614],{"class":407},[253,621,423],{"class":290},[253,623,625,627,630],{"class":255,"line":624},23,[253,626,560],{"class":290},[253,628,629],{"class":407},"GoopDropdownMenuGroup",[253,631,423],{"class":290},[253,633,635,638,641,644,647,650,652,655,657],{"class":255,"line":634},24,[253,636,637],{"class":290},"        \u003C",[253,639,640],{"class":407},"GoopDropdownMenuItem",[253,642,643],{"class":290},">Profile \u003C",[253,645,646],{"class":407},"GoopDropdownMenuShortcut",[253,648,649],{"class":290},">⇧⌘P\u003C\u002F",[253,651,646],{"class":407},[253,653,654],{"class":290},">\u003C\u002F",[253,656,640],{"class":407},[253,658,423],{"class":290},[253,660,662,664,666,669,671,674,676,678,680],{"class":255,"line":661},25,[253,663,637],{"class":290},[253,665,640],{"class":407},[253,667,668],{"class":290},">Settings \u003C",[253,670,646],{"class":407},[253,672,673],{"class":290},">⌘,\u003C\u002F",[253,675,646],{"class":407},[253,677,654],{"class":290},[253,679,640],{"class":407},[253,681,423],{"class":290},[253,683,685,687,689,692,695,697],{"class":255,"line":684},26,[253,686,637],{"class":290},[253,688,640],{"class":407},[253,690,691],{"class":259}," disabled",[253,693,694],{"class":290},">Billing\u003C\u002F",[253,696,640],{"class":407},[253,698,423],{"class":290},[253,700,702,705,707],{"class":255,"line":701},27,[253,703,704],{"class":290},"      \u003C\u002F",[253,706,629],{"class":407},[253,708,423],{"class":290},[253,710,712,714,717],{"class":255,"line":711},28,[253,713,560],{"class":290},[253,715,716],{"class":407},"GoopDropdownMenuSeparator",[253,718,719],{"class":290}," \u002F>\n",[253,721,723,725,727,729,731,734,737,739],{"class":255,"line":722},29,[253,724,560],{"class":290},[253,726,640],{"class":407},[253,728,566],{"class":259},[253,730,417],{"class":290},[253,732,733],{"class":263},"\"destructive\"",[253,735,736],{"class":290},">Log out\u003C\u002F",[253,738,640],{"class":407},[253,740,423],{"class":290},[253,742,744,746,748],{"class":255,"line":743},30,[253,745,584],{"class":290},[253,747,596],{"class":407},[253,749,423],{"class":290},[253,751,753,756,758],{"class":255,"line":752},31,[253,754,755],{"class":290},"  \u003C\u002F",[253,757,219],{"class":407},[253,759,423],{"class":290},[253,761,763,765,767],{"class":255,"line":762},32,[253,764,509],{"class":290},[253,766,528],{"class":407},[253,768,423],{"class":290},[206,770,771,772,324,774,324,777,324,780,324,783,324,786,324,788,324,791,324,794,324,797,324,800,324,802,324,805,324,808,811,812,815,816,818,819,212,821,823],{},"The parts are ",[209,773,219],{},[209,775,776],{},"Trigger",[209,778,779],{},"Content",[209,781,782],{},"Portal",[209,784,785],{},"Group",[209,787,171],{},[209,789,790],{},"Item",[209,792,793],{},"CheckboxItem",[209,795,796],{},"RadioGroup",[209,798,799],{},"RadioItem",[209,801,167],{},[209,803,804],{},"Shortcut",[209,806,807],{},"Sub",[209,809,810],{},"SubTrigger",", and ",[209,813,814],{},"SubContent",", each prefixed with ",[209,817,219],{},". The goo lives on ",[209,820,779],{},[209,822,814],{},".",[235,825,827],{"id":826},"behavior","Behavior",[829,830,831,852,862,876,882,888],"ul",{},[832,833,834,838,839,841,842,324,845,811,848,851],"li",{},[835,836,837],"strong",{},"Open."," The panel blooms like the ",[227,840,78],{"href":79},": a droplet swells at its center, spreads into the menu with a lobed edge, overshoots, and splashes drops all around, keeping them off the trigger. ",[209,843,844],{},"flowStyle",[209,846,847],{},"bloomStart",[209,849,850],{},":flow=\"false\""," pick the same open styles as the Popover's.",[832,853,854,857,858,861],{},[835,855,856],{},"Highlight blob."," The highlighted item gets a goo blob that slides between items with momentum, stretching with a neck while it travels and landing with a jelly overshoot. It follows the pointer and the keyboard. With a pointer, its swell (the neck, and a soft bulge as you move along an item) trails the cursor; with the keyboard it stays centred. ",[209,859,860],{},":follow-pointer=\"false\""," keeps it centred always.",[832,863,864,867,868,871,872,875],{},[835,865,866],{},"Select pop."," Choosing an item squishes the blob, and the menu closes once that has played. Call ",[209,869,870],{},"event.preventDefault()"," in ",[209,873,874],{},"@select"," to keep the menu open.",[832,877,878,881],{},[835,879,880],{},"Submenus"," open from their row the same way and have their own highlight.",[832,883,884,887],{},[835,885,886],{},"Close."," The panel pulls in, wobbles, and shrinks back to its center.",[832,889,890,893],{},[835,891,892],{},"Items stay sharp."," Only the panel background, ring, shadow, and highlight are goo, drawn behind your items. Text and icons are never filtered.",[235,895,897],{"id":896},"checkboxes-and-radios","Checkboxes and radios",[206,899,900,212,902,904],{},[209,901,793],{},[209,903,799],{}," work like shadcn's. The blob highlights them the same way:",[906,907,909],"preview",{":controls":908},"false",[198,910],{"set":911},"checks",[244,913,915],{"className":396,"code":914,"language":346,"meta":249,"style":249},"\u003CGoopDropdownMenuCheckboxItem v-model=\"statusBar\">Status bar\u003C\u002FGoopDropdownMenuCheckboxItem>\n\u003CGoopDropdownMenuSeparator \u002F>\n\u003CGoopDropdownMenuRadioGroup v-model=\"position\">\n  \u003CGoopDropdownMenuRadioItem value=\"top\">Top\u003C\u002FGoopDropdownMenuRadioItem>\n  \u003CGoopDropdownMenuRadioItem value=\"bottom\">Bottom\u003C\u002FGoopDropdownMenuRadioItem>\n\u003C\u002FGoopDropdownMenuRadioGroup>\n",[209,916,917,944,952,972,977,982],{"__ignoreMap":249},[253,918,919,921,924,927,929,932,935,937,940,942],{"class":255,"line":256},[253,920,404],{"class":290},[253,922,923],{"class":407},"GoopDropdownMenuCheckboxItem",[253,925,926],{"class":259}," v-model",[253,928,417],{"class":290},[253,930,931],{"class":263},"\"",[253,933,934],{"class":290},"statusBar",[253,936,931],{"class":263},[253,938,939],{"class":290},">Status bar\u003C\u002F",[253,941,923],{"class":407},[253,943,423],{"class":290},[253,945,946,948,950],{"class":255,"line":294},[253,947,404],{"class":290},[253,949,716],{"class":407},[253,951,719],{"class":290},[253,953,954,956,959,961,963,965,968,970],{"class":255,"line":306},[253,955,404],{"class":290},[253,957,958],{"class":407},"GoopDropdownMenuRadioGroup",[253,960,926],{"class":259},[253,962,417],{"class":290},[253,964,931],{"class":263},[253,966,967],{"class":290},"position",[253,969,931],{"class":263},[253,971,423],{"class":290},[253,973,974],{"class":255,"line":440},[253,975,976],{"class":290},"  \u003CGoopDropdownMenuRadioItem value=\"top\">Top\u003C\u002FGoopDropdownMenuRadioItem>\n",[253,978,979],{"class":255,"line":446},[253,980,981],{"class":290},"  \u003CGoopDropdownMenuRadioItem value=\"bottom\">Bottom\u003C\u002FGoopDropdownMenuRadioItem>\n",[253,983,984,986,988],{"class":255,"line":452},[253,985,509],{"class":290},[253,987,958],{"class":407},[253,989,423],{"class":290},[235,991,880],{"id":992},"submenus",[244,994,996],{"className":396,"code":995,"language":346,"meta":249,"style":249},"\u003CGoopDropdownMenuSub>\n  \u003CGoopDropdownMenuSubTrigger>Send to\u003C\u002FGoopDropdownMenuSubTrigger>\n  \u003CGoopDropdownMenuSubContent>\n    \u003CGoopDropdownMenuItem>Email\u003C\u002FGoopDropdownMenuItem>\n    \u003CGoopDropdownMenuItem>Message\u003C\u002FGoopDropdownMenuItem>\n  \u003C\u002FGoopDropdownMenuSubContent>\n\u003C\u002FGoopDropdownMenuSub>\n",[209,997,998,1007,1012,1017,1022,1027,1032],{"__ignoreMap":249},[253,999,1000,1002,1005],{"class":255,"line":256},[253,1001,404],{"class":290},[253,1003,1004],{"class":407},"GoopDropdownMenuSub",[253,1006,423],{"class":290},[253,1008,1009],{"class":255,"line":294},[253,1010,1011],{"class":290},"  \u003CGoopDropdownMenuSubTrigger>Send to\u003C\u002FGoopDropdownMenuSubTrigger>\n",[253,1013,1014],{"class":255,"line":306},[253,1015,1016],{"class":290},"  \u003CGoopDropdownMenuSubContent>\n",[253,1018,1019],{"class":255,"line":440},[253,1020,1021],{"class":290},"    \u003CGoopDropdownMenuItem>Email\u003C\u002FGoopDropdownMenuItem>\n",[253,1023,1024],{"class":255,"line":446},[253,1025,1026],{"class":290},"    \u003CGoopDropdownMenuItem>Message\u003C\u002FGoopDropdownMenuItem>\n",[253,1028,1029],{"class":255,"line":452},[253,1030,1031],{"class":290},"  \u003C\u002FGoopDropdownMenuSubContent>\n",[253,1033,1034,1036,1038],{"class":255,"line":458},[253,1035,509],{"class":290},[253,1037,1004],{"class":407},[253,1039,423],{"class":290},[906,1041,1042],{":controls":908},[198,1043],{"set":1044},"sub",[206,1046,1047,1048,1050,1051,1054],{},"Goo props you leave unset on ",[209,1049,814],{}," inherit from the parent menu. ",[209,1052,1053],{},":submenus=\"false\""," on the parent makes every submenu a plain shadcn one.",[235,1056,1058],{"id":1057},"surface-color","Surface color",[206,1060,1061,1062,1065,1066,1069],{},"By default the panel takes the trigger's color: the whole goo uses the trigger's background and the items use its text color. If the trigger has no background of its own, the theme's primary is used. Set ",[209,1063,1064],{},"surface=\"popover\""," for shadcn's popover tokens, or pass any CSS color. Submenus that don't set ",[209,1067,1068],{},"surface"," reuse their parent's resolved colors.",[244,1071,1073],{"className":396,"code":1072,"language":346,"meta":249,"style":249},"\u003CGoopDropdownMenuContent surface=\"popover\">...\u003C\u002FGoopDropdownMenuContent>\n\u003CGoopDropdownMenuContent surface=\"oklch(0.55 0.22 290)\">...\u003C\u002FGoopDropdownMenuContent>\n",[209,1074,1075,1096],{"__ignoreMap":249},[253,1076,1077,1079,1081,1084,1086,1089,1092,1094],{"class":255,"line":256},[253,1078,404],{"class":290},[253,1080,596],{"class":407},[253,1082,1083],{"class":259}," surface",[253,1085,417],{"class":290},[253,1087,1088],{"class":263},"\"popover\"",[253,1090,1091],{"class":290},">...\u003C\u002F",[253,1093,596],{"class":407},[253,1095,423],{"class":290},[253,1097,1098,1100,1102,1104,1106,1109,1111,1113],{"class":255,"line":294},[253,1099,404],{"class":290},[253,1101,596],{"class":407},[253,1103,1083],{"class":259},[253,1105,417],{"class":290},[253,1107,1108],{"class":263},"\"oklch(0.55 0.22 290)\"",[253,1110,1091],{"class":290},[253,1112,596],{"class":407},[253,1114,423],{"class":290},[235,1116,1118],{"id":1117},"burst-knobs","Burst knobs",[206,1120,1121,1122,324,1125,324,1128,811,1131,1134,1135,1138,1139,1142],{},"The open burst has the same four knobs as the Popover: ",[209,1123,1124],{},"openDripAmount",[209,1126,1127],{},"openDripSize",[209,1129,1130],{},"openDripFling",[209,1132,1133],{},"openDripVariety",", plus ",[209,1136,1137],{},"sloshVariety"," for how unevenly the sides slosh. On a menu, ",[209,1140,1141],{},"openDrips"," is a plain boolean.",[244,1144,1146],{"className":396,"code":1145,"language":346,"meta":249,"style":249},"\u003CGoopDropdownMenuContent :open-drip-amount=\"2\" :open-drip-fling=\"1.5\">...\u003C\u002FGoopDropdownMenuContent>\n",[209,1147,1148],{"__ignoreMap":249},[253,1149,1150,1152,1154,1157,1160,1162,1164,1168,1170,1172,1175,1177,1179,1182,1184,1186,1188],{"class":255,"line":256},[253,1151,404],{"class":290},[253,1153,596],{"class":407},[253,1155,1156],{"class":290}," :",[253,1158,1159],{"class":259},"open-drip-amount",[253,1161,417],{"class":290},[253,1163,931],{"class":263},[253,1165,1167],{"class":1166},"sj4cs","2",[253,1169,931],{"class":263},[253,1171,1156],{"class":290},[253,1173,1174],{"class":259},"open-drip-fling",[253,1176,417],{"class":290},[253,1178,931],{"class":263},[253,1180,1181],{"class":1166},"1.5",[253,1183,931],{"class":263},[253,1185,1091],{"class":290},[253,1187,596],{"class":407},[253,1189,423],{"class":290},[235,1191,1193],{"id":1192},"turning-parts-off","Turning parts off",[206,1195,1196],{},"Each effect is its own prop. Turn off the highlight blob, the burst, or all the goo:",[906,1198,1199],{":controls":908},[198,1200],{"set":1201},"plain",[244,1203,1205],{"className":396,"code":1204,"language":346,"meta":249,"style":249},"\u003CGoopDropdownMenuContent :highlight=\"false\" :open-drips=\"false\">...\u003C\u002FGoopDropdownMenuContent>\n\u003CGoopDropdownMenuContent surface=\"popover\">...\u003C\u002FGoopDropdownMenuContent>\n\u003CGoopDropdownMenuContent :goo=\"false\">...\u003C\u002FGoopDropdownMenuContent>\n",[209,1206,1207,1245,1263],{"__ignoreMap":249},[253,1208,1209,1211,1213,1215,1218,1220,1222,1224,1226,1228,1231,1233,1235,1237,1239,1241,1243],{"class":255,"line":256},[253,1210,404],{"class":290},[253,1212,596],{"class":407},[253,1214,1156],{"class":290},[253,1216,1217],{"class":259},"highlight",[253,1219,417],{"class":290},[253,1221,931],{"class":263},[253,1223,908],{"class":1166},[253,1225,931],{"class":263},[253,1227,1156],{"class":290},[253,1229,1230],{"class":259},"open-drips",[253,1232,417],{"class":290},[253,1234,931],{"class":263},[253,1236,908],{"class":1166},[253,1238,931],{"class":263},[253,1240,1091],{"class":290},[253,1242,596],{"class":407},[253,1244,423],{"class":290},[253,1246,1247,1249,1251,1253,1255,1257,1259,1261],{"class":255,"line":294},[253,1248,404],{"class":290},[253,1250,596],{"class":407},[253,1252,1083],{"class":259},[253,1254,417],{"class":290},[253,1256,1088],{"class":263},[253,1258,1091],{"class":290},[253,1260,596],{"class":407},[253,1262,423],{"class":290},[253,1264,1265,1267,1269,1271,1274,1276,1278,1280,1282,1284,1286],{"class":255,"line":306},[253,1266,404],{"class":290},[253,1268,596],{"class":407},[253,1270,1156],{"class":290},[253,1272,1273],{"class":259},"goo",[253,1275,417],{"class":290},[253,1277,931],{"class":263},[253,1279,908],{"class":1166},[253,1281,931],{"class":263},[253,1283,1091],{"class":290},[253,1285,596],{"class":407},[253,1287,423],{"class":290},[206,1289,1290,1293],{},[209,1291,1292],{},":goo=\"false\""," renders exactly shadcn's DropdownMenuContent.",[235,1295,1297],{"id":1296},"driving-it-from-code","Driving it from code",[206,1299,1300,1302,1303,1306,1307,1309,1310,1313],{},[209,1301,596],{}," exposes ",[209,1304,1305],{},"handle"," (the panel's engine handle) and ",[209,1308,1217],{}," (the blob's handle). Both are ",[209,1311,1312],{},"null"," before mount or when the goo is off.",[235,1315,1317],{"id":1316},"props","Props",[206,1319,1320,1321,1323,1324,212,1327,1330,1331,212,1333,1336,1337,324,1340,324,1343,1346,1347,1350,1351,212,1354,823],{},"The root, trigger, group, label, separator, shortcut, and sub parts take shadcn-vue's props. ",[209,1322,790],{}," also takes ",[209,1325,1326],{},"inset",[209,1328,1329],{},"variant=\"destructive\"",", like shadcn. ",[209,1332,596],{},[209,1334,1335],{},"GoopDropdownMenuSubContent"," take reka-ui's props (",[209,1338,1339],{},"side",[209,1341,1342],{},"align",[209,1344,1345],{},"sideOffset",", ...), ",[209,1348,1349],{},"class",", and these goo props. Defaults are ",[209,1352,1353],{},"align=\"start\"",[209,1355,1356],{},"sideOffset=\"4\"",[1358,1359],"component-props",{"name":196,"part":1360},[1361],"content",[235,1363,1365],{"id":1364},"accessibility","Accessibility",[206,1367,1368,1369,1372,1373,823],{},"Keyboard navigation, typeahead, focus management, and ARIA roles come from reka-ui. The goo surface and blob are ",[209,1370,1371],{},"aria-hidden"," and can't be clicked, and your items are never filtered. Under reduced motion the menu opens and closes plainly: the panel keeps its goo shape and color, the highlight blob snaps between items with no pop, and the bloom, bridge, slosh, and drops are turned off. See ",[227,1374,23],{"href":24},[1376,1377,1378],"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":249,"searchDepth":306,"depth":306,"links":1380},[1381,1385,1386,1387,1388,1389,1390,1391,1392,1393,1394],{"id":237,"depth":294,"text":15,"children":1382},[1383,1384],{"id":241,"depth":306,"text":242},{"id":346,"depth":306,"text":347},{"id":392,"depth":294,"text":393},{"id":826,"depth":294,"text":827},{"id":896,"depth":294,"text":897},{"id":992,"depth":294,"text":880},{"id":1057,"depth":294,"text":1058},{"id":1117,"depth":294,"text":1118},{"id":1192,"depth":294,"text":1193},{"id":1296,"depth":294,"text":1297},{"id":1316,"depth":294,"text":1317},{"id":1364,"depth":294,"text":1365},"shadcn's Dropdown Menu with goo. The menu blooms open, and the highlight is a blob that slides between items.","md",{},{"title":82,"description":1395},"960gu5kvthCcNVlWmvPBMekKTIHIDAHh8Ne6DNQbx-E",[1401,1403],{"title":78,"path":79,"stem":80,"description":1402,"children":-1},"shadcn's Popover with goo. The panel blooms out of a droplet, overshoots, and splashes all around.",{"title":86,"path":87,"stem":88,"description":1404,"children":-1},"shadcn's Tooltip with goo. A small label that blooms open, quick and light.",1793670386809]