[{"data":1,"prerenderedAt":507},["ShallowReactive",2],{"docs:\u002Freact\u002Fmenu":3,"docs-nav":374},{"id":4,"title":5,"body":6,"description":367,"extension":368,"meta":369,"navigation":123,"path":370,"seo":371,"stem":372,"__hash__":373},"docs\u002Freact\u002Fmenu.md","Menu (Dropdown)",{"type":7,"value":8,"toc":362},"minimark",[9,14,23,48,68,72,83,303,351,355,358],[10,11,13],"h2",{"id":12},"installation","Installation",[15,16,17,18,22],"p",{},"Install ",[19,20,21],"code",{},"@vinui\u002Freact"," from GitHub with pnpm, then import its stylesheet once, in your root layout or entry file:",[24,25,30],"pre",{"className":26,"code":27,"language":28,"meta":29,"style":29},"language-bash shiki shiki-themes github-light","pnpm add github:vindotski\u002Fvinui#path:packages\u002Freact\n","bash","",[19,31,32],{"__ignoreMap":29},[33,34,37,41,45],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"s7eDp","pnpm",[33,42,44],{"class":43},"sYBdl"," add",[33,46,47],{"class":43}," github:vindotski\u002Fvinui#path:packages\u002Freact\n",[24,49,53],{"className":50,"code":51,"language":52,"meta":29,"style":29},"language-tsx shiki shiki-themes github-light","import '@vinui\u002Freact\u002Fstyles.css';\n","tsx",[19,54,55],{"__ignoreMap":29},[33,56,57,61,64],{"class":35,"line":36},[33,58,60],{"class":59},"sD7c4","import",[33,62,63],{"class":43}," '@vinui\u002Freact\u002Fstyles.css'",[33,65,67],{"class":66},"sgsFI",";\n",[10,69,71],{"id":70},"usage","Usage",[15,73,74,75,82],{},"A dropdown menu built on ",[76,77,81],"a",{"href":78,"rel":79},"https:\u002F\u002Fheadlessui.com\u002Freact\u002Fmenu",[80],"nofollow","Headless UI's Menu",", with keyboard navigation, typeahead and focus management included:",[24,84,86],{"className":50,"code":85,"language":52,"meta":29,"style":29},"import { ChevronDownIcon, PencilIcon } from '@heroicons\u002Freact\u002F16\u002Fsolid';\nimport { Icon, Menu, MenuButton, MenuItem, MenuItems, MenuSeparator } from '@vinui\u002Freact';\n\n\u003CMenu>\n  \u003CMenuButton>\n    Options\n    \u003CIcon icon={ChevronDownIcon} \u002F>\n  \u003C\u002FMenuButton>\n  \u003CMenuItems>\n    \u003CMenuItem onClick={edit}>\n      \u003CIcon icon={PencilIcon} size=\"sm\" \u002F>\n      Edit\n    \u003C\u002FMenuItem>\n    \u003CMenuSeparator \u002F>\n    \u003CMenuItem href=\"\u002Fsettings\">Settings\u003C\u002FMenuItem>\n  \u003C\u002FMenuItems>\n\u003C\u002FMenu>;\n",[19,87,88,103,118,125,138,149,155,173,183,193,209,235,241,251,261,283,292],{"__ignoreMap":29},[33,89,90,92,95,98,101],{"class":35,"line":36},[33,91,60],{"class":59},[33,93,94],{"class":66}," { ChevronDownIcon, PencilIcon } ",[33,96,97],{"class":59},"from",[33,99,100],{"class":43}," '@heroicons\u002Freact\u002F16\u002Fsolid'",[33,102,67],{"class":66},[33,104,106,108,111,113,116],{"class":35,"line":105},2,[33,107,60],{"class":59},[33,109,110],{"class":66}," { Icon, Menu, MenuButton, MenuItem, MenuItems, MenuSeparator } ",[33,112,97],{"class":59},[33,114,115],{"class":43}," '@vinui\u002Freact'",[33,117,67],{"class":66},[33,119,121],{"class":35,"line":120},3,[33,122,124],{"emptyLinePlaceholder":123},true,"\n",[33,126,128,131,135],{"class":35,"line":127},4,[33,129,130],{"class":66},"\u003C",[33,132,134],{"class":133},"sYu0t","Menu",[33,136,137],{"class":66},">\n",[33,139,141,144,147],{"class":35,"line":140},5,[33,142,143],{"class":66},"  \u003C",[33,145,146],{"class":133},"MenuButton",[33,148,137],{"class":66},[33,150,152],{"class":35,"line":151},6,[33,153,154],{"class":66},"    Options\n",[33,156,158,161,164,167,170],{"class":35,"line":157},7,[33,159,160],{"class":66},"    \u003C",[33,162,163],{"class":133},"Icon",[33,165,166],{"class":39}," icon",[33,168,169],{"class":59},"=",[33,171,172],{"class":66},"{ChevronDownIcon} \u002F>\n",[33,174,176,179,181],{"class":35,"line":175},8,[33,177,178],{"class":66},"  \u003C\u002F",[33,180,146],{"class":133},[33,182,137],{"class":66},[33,184,186,188,191],{"class":35,"line":185},9,[33,187,143],{"class":66},[33,189,190],{"class":133},"MenuItems",[33,192,137],{"class":66},[33,194,196,198,201,204,206],{"class":35,"line":195},10,[33,197,160],{"class":66},[33,199,200],{"class":133},"MenuItem",[33,202,203],{"class":39}," onClick",[33,205,169],{"class":59},[33,207,208],{"class":66},"{edit}>\n",[33,210,212,215,217,219,221,224,227,229,232],{"class":35,"line":211},11,[33,213,214],{"class":66},"      \u003C",[33,216,163],{"class":133},[33,218,166],{"class":39},[33,220,169],{"class":59},[33,222,223],{"class":66},"{PencilIcon} ",[33,225,226],{"class":39},"size",[33,228,169],{"class":59},[33,230,231],{"class":43},"\"sm\"",[33,233,234],{"class":66}," \u002F>\n",[33,236,238],{"class":35,"line":237},12,[33,239,240],{"class":66},"      Edit\n",[33,242,244,247,249],{"class":35,"line":243},13,[33,245,246],{"class":66},"    \u003C\u002F",[33,248,200],{"class":133},[33,250,137],{"class":66},[33,252,254,256,259],{"class":35,"line":253},14,[33,255,160],{"class":66},[33,257,258],{"class":133},"MenuSeparator",[33,260,234],{"class":66},[33,262,264,266,268,271,273,276,279,281],{"class":35,"line":263},15,[33,265,160],{"class":66},[33,267,200],{"class":133},[33,269,270],{"class":39}," href",[33,272,169],{"class":59},[33,274,275],{"class":43},"\"\u002Fsettings\"",[33,277,278],{"class":66},">Settings\u003C\u002F",[33,280,200],{"class":133},[33,282,137],{"class":66},[33,284,286,288,290],{"class":35,"line":285},16,[33,287,178],{"class":66},[33,289,190],{"class":133},[33,291,137],{"class":66},[33,293,295,298,300],{"class":35,"line":294},17,[33,296,297],{"class":66},"\u003C\u002F",[33,299,134],{"class":133},[33,301,302],{"class":66},">;\n",[304,305,306,320,329,338],"ul",{},[307,308,309,311,312,315,316,319],"li",{},[19,310,146],{}," takes the same props as ",[19,313,314],{},"Button"," and defaults to ",[19,317,318],{},"variant=\"secondary\"",".",[307,321,322,324,325,328],{},[19,323,190],{}," opens at ",[19,326,327],{},"anchor=\"bottom start\""," by default and flips when there isn't room.",[307,330,331,333,334,337],{},[19,332,200],{}," renders a link when given ",[19,335,336],{},"href",", otherwise a button.",[307,339,340,341,344,345,348,349,319],{},"Group items with ",[19,342,343],{},"MenuSection"," and ",[19,346,347],{},"MenuHeading",", and divide them with ",[19,350,258],{},[10,352,354],{"id":353},"more-to-come","More to come",[15,356,357],{},"Detailed examples, keyboard interaction and the full component API are on their way.",[359,360,361],"style",{},"html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}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 pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}",{"title":29,"searchDepth":105,"depth":120,"links":363},[364,365,366],{"id":12,"depth":105,"text":13},{"id":70,"depth":105,"text":71},{"id":353,"depth":105,"text":354},"Menus offer an easy way to build custom, accessible dropdown components with robust support for keyboard navigation.","md",{},"\u002Freact\u002Fmenu",{"title":5,"description":367},"react\u002Fmenu","UFuAuiOfLgYWTItiw0hmVwA4YilHLuuUQz2zrh_YnTs",[375,448],{"title":376,"path":377,"stem":378,"children":379,"page":447},"React","\u002Freact","react",[380,383,387,391,395,399,403,406,410,414,415,419,423,427,431,435,439,443],{"title":314,"path":381,"stem":382},"\u002Freact\u002Fbutton","react\u002Fbutton",{"title":384,"path":385,"stem":386},"Checkbox","\u002Freact\u002Fcheckbox","react\u002Fcheckbox",{"title":388,"path":389,"stem":390},"Combobox (Autocomplete)","\u002Freact\u002Fcombobox","react\u002Fcombobox",{"title":392,"path":393,"stem":394},"Dialog (Modal)","\u002Freact\u002Fdialog","react\u002Fdialog",{"title":396,"path":397,"stem":398},"Disclosure","\u002Freact\u002Fdisclosure","react\u002Fdisclosure",{"title":400,"path":401,"stem":402},"Fieldset","\u002Freact\u002Ffieldset","react\u002Ffieldset",{"title":163,"path":404,"stem":405},"\u002Freact\u002Ficon","react\u002Ficon",{"title":407,"path":408,"stem":409},"Input","\u002Freact\u002Finput","react\u002Finput",{"title":411,"path":412,"stem":413},"Listbox (Select)","\u002Freact\u002Flistbox","react\u002Flistbox",{"title":5,"path":370,"stem":372},{"title":416,"path":417,"stem":418},"Pattern","\u002Freact\u002Fpattern","react\u002Fpattern",{"title":420,"path":421,"stem":422},"Popover","\u002Freact\u002Fpopover","react\u002Fpopover",{"title":424,"path":425,"stem":426},"Radio Group","\u002Freact\u002Fradio-group","react\u002Fradio-group",{"title":428,"path":429,"stem":430},"Select","\u002Freact\u002Fselect","react\u002Fselect",{"title":432,"path":433,"stem":434},"Switch (Toggle)","\u002Freact\u002Fswitch","react\u002Fswitch",{"title":436,"path":437,"stem":438},"Tabs","\u002Freact\u002Ftabs","react\u002Ftabs",{"title":440,"path":441,"stem":442},"Textarea","\u002Freact\u002Ftextarea","react\u002Ftextarea",{"title":444,"path":445,"stem":446},"Transition","\u002Freact\u002Ftransition","react\u002Ftransition",false,{"title":449,"path":450,"stem":451,"children":452,"page":447},"Vue","\u002Fvue","vue",[453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504],{"title":314,"path":454,"stem":455},"\u002Fvue\u002Fbutton","vue\u002Fbutton",{"title":384,"path":457,"stem":458},"\u002Fvue\u002Fcheckbox","vue\u002Fcheckbox",{"title":388,"path":460,"stem":461},"\u002Fvue\u002Fcombobox","vue\u002Fcombobox",{"title":392,"path":463,"stem":464},"\u002Fvue\u002Fdialog","vue\u002Fdialog",{"title":396,"path":466,"stem":467},"\u002Fvue\u002Fdisclosure","vue\u002Fdisclosure",{"title":400,"path":469,"stem":470},"\u002Fvue\u002Ffieldset","vue\u002Ffieldset",{"title":163,"path":472,"stem":473},"\u002Fvue\u002Ficon","vue\u002Ficon",{"title":407,"path":475,"stem":476},"\u002Fvue\u002Finput","vue\u002Finput",{"title":411,"path":478,"stem":479},"\u002Fvue\u002Flistbox","vue\u002Flistbox",{"title":5,"path":481,"stem":482},"\u002Fvue\u002Fmenu","vue\u002Fmenu",{"title":416,"path":484,"stem":485},"\u002Fvue\u002Fpattern","vue\u002Fpattern",{"title":420,"path":487,"stem":488},"\u002Fvue\u002Fpopover","vue\u002Fpopover",{"title":424,"path":490,"stem":491},"\u002Fvue\u002Fradio-group","vue\u002Fradio-group",{"title":428,"path":493,"stem":494},"\u002Fvue\u002Fselect","vue\u002Fselect",{"title":432,"path":496,"stem":497},"\u002Fvue\u002Fswitch","vue\u002Fswitch",{"title":436,"path":499,"stem":500},"\u002Fvue\u002Ftabs","vue\u002Ftabs",{"title":440,"path":502,"stem":503},"\u002Fvue\u002Ftextarea","vue\u002Ftextarea",{"title":444,"path":505,"stem":506},"\u002Fvue\u002Ftransition","vue\u002Ftransition",1792929667214]