[{"data":1,"prerenderedAt":727},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-menubar":12,"i-ph:code":725},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":25,"extension":719,"meta":720,"navigation":160,"path":721,"seo":722,"stem":723,"__hash__":724},"docs\u002Fdocs\u002Fcomponents\u002Fmenubar.md","Menubar",{"type":16,"value":17,"toc":715},"minimark",[18,22,26,43,626,631,645,649,711],[19,20,14],"h1",{"id":21},"menubar",[23,24,25],"p",{},"A menubar component that renders a horizontal list of labeled menu triggers. Clicking a trigger opens its associated menu inline as a floating panel. Hovering over other triggers while any menu is open switches the active menu immediately — matching the native menubar UX.",[27,28,29],"blockquote",{},[23,30,31,32,36,37,42],{},"The menu slot content is unstyled by default. Wrapping it in ",[33,34,35],"code",{},"\u003Cdiv class=\"vui-dropdown\">"," makes it visually consistent with the ",[38,39,41],"a",{"href":40},"\u002Fdocs\u002Fcomponents\u002Fdropdown","Dropdown"," component.",[44,45,47],"menubar-example",{"source-path":46},"Menubar\u002FMenubar.vue",[48,49,54],"pre",{"className":50,"code":51,"language":52,"meta":53,"style":53},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup lang=\"ts\">\nimport { Button, Card, Divider, DropdownItem, Menubar, MenuItem } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CMenubar>\n    \u003CMenuItem>\n      \u003CButton plain size=\"s\">\n        File\n      \u003C\u002FButton>\n      \u003Ctemplate #menu>\n        \u003Cdiv class=\"vui-dropdown\">\n          \u003CDropdownItem size=\"s\">\n            New File\n          \u003C\u002FDropdownItem>\n          \u003CDropdownItem size=\"s\">\n            Open...\n          \u003C\u002FDropdownItem>\n          \u003CDivider class=\"my-xxxs\" \u002F>\n          \u003CDropdownItem size=\"s\" disabled>\n            Exit\n          \u003C\u002FDropdownItem>\n        \u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n    \u003C\u002FMenuItem>\n    \u003CMenuItem>\n      \u003CButton plain size=\"s\">\n        Edit\n      \u003C\u002FButton>\n      \u003Ctemplate #menu>\n        \u003Cdiv class=\"vui-dropdown\">\n          \u003CDropdownItem size=\"s\">\n            Undo\n          \u003C\u002FDropdownItem>\n          \u003CDropdownItem size=\"s\">\n            Redo\n          \u003C\u002FDropdownItem>\n        \u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n    \u003C\u002FMenuItem>\n  \u003C\u002FMenubar>\n\u003C\u002Ftemplate>\n","vue","",[33,55,56,92,145,155,162,172,182,194,220,227,237,253,276,297,303,313,332,338,347,369,391,397,406,416,425,435,444,465,471,480,493,512,531,537,546,565,571,580,589,598,607,617],{"__ignoreMap":53},[57,58,61,65,69,73,76,79,83,87,89],"span",{"class":59,"line":60},"line",1,[57,62,64],{"class":63},"sP76a","\u003C",[57,66,68],{"class":67},"sKpE2","script",[57,70,72],{"class":71},"sflEz"," setup",[57,74,75],{"class":71}," lang",[57,77,78],{"class":63},"=",[57,80,82],{"class":81},"sBR95","\"",[57,84,86],{"class":85},"sfmH-","ts",[57,88,82],{"class":81},[57,90,91],{"class":63},">\n",[57,93,95,98,101,104,107,110,112,115,117,120,122,125,127,130,133,136,139,142],{"class":59,"line":94},2,[57,96,97],{"class":67},"import",[57,99,100],{"class":63}," {",[57,102,103],{"class":71}," Button",[57,105,106],{"class":63},",",[57,108,109],{"class":71}," Card",[57,111,106],{"class":63},[57,113,114],{"class":71}," Divider",[57,116,106],{"class":63},[57,118,119],{"class":71}," DropdownItem",[57,121,106],{"class":63},[57,123,124],{"class":71}," Menubar",[57,126,106],{"class":63},[57,128,129],{"class":71}," MenuItem",[57,131,132],{"class":63}," }",[57,134,135],{"class":67}," from",[57,137,138],{"class":81}," '",[57,140,141],{"class":85},"@dolanske\u002Fvui",[57,143,144],{"class":81},"'\n",[57,146,148,151,153],{"class":59,"line":147},3,[57,149,150],{"class":63},"\u003C\u002F",[57,152,68],{"class":67},[57,154,91],{"class":63},[57,156,158],{"class":59,"line":157},4,[57,159,161],{"emptyLinePlaceholder":160},true,"\n",[57,163,165,167,170],{"class":59,"line":164},5,[57,166,64],{"class":63},[57,168,169],{"class":67},"template",[57,171,91],{"class":63},[57,173,175,178,180],{"class":59,"line":174},6,[57,176,177],{"class":63},"  \u003C",[57,179,14],{"class":67},[57,181,91],{"class":63},[57,183,185,188,192],{"class":59,"line":184},7,[57,186,187],{"class":63},"    \u003C",[57,189,191],{"class":190},"snI5G","MenuItem",[57,193,91],{"class":63},[57,195,197,200,203,206,209,211,213,216,218],{"class":59,"line":196},8,[57,198,199],{"class":63},"      \u003C",[57,201,202],{"class":67},"Button",[57,204,205],{"class":71}," plain",[57,207,208],{"class":71}," size",[57,210,78],{"class":63},[57,212,82],{"class":81},[57,214,215],{"class":85},"s",[57,217,82],{"class":81},[57,219,91],{"class":63},[57,221,223],{"class":59,"line":222},9,[57,224,226],{"class":225},"sX1ls","        File\n",[57,228,230,233,235],{"class":59,"line":229},10,[57,231,232],{"class":63},"      \u003C\u002F",[57,234,202],{"class":67},[57,236,91],{"class":63},[57,238,240,242,244,247,251],{"class":59,"line":239},11,[57,241,199],{"class":63},[57,243,169],{"class":67},[57,245,246],{"class":63}," #",[57,248,250],{"class":249},"sRTv0","menu",[57,252,91],{"class":63},[57,254,256,259,262,265,267,269,272,274],{"class":59,"line":255},12,[57,257,258],{"class":63},"        \u003C",[57,260,261],{"class":67},"div",[57,263,264],{"class":71}," class",[57,266,78],{"class":63},[57,268,82],{"class":81},[57,270,271],{"class":85},"vui-dropdown",[57,273,82],{"class":81},[57,275,91],{"class":63},[57,277,279,282,285,287,289,291,293,295],{"class":59,"line":278},13,[57,280,281],{"class":63},"          \u003C",[57,283,284],{"class":67},"DropdownItem",[57,286,208],{"class":71},[57,288,78],{"class":63},[57,290,82],{"class":81},[57,292,215],{"class":85},[57,294,82],{"class":81},[57,296,91],{"class":63},[57,298,300],{"class":59,"line":299},14,[57,301,302],{"class":225},"            New File\n",[57,304,306,309,311],{"class":59,"line":305},15,[57,307,308],{"class":63},"          \u003C\u002F",[57,310,284],{"class":67},[57,312,91],{"class":63},[57,314,316,318,320,322,324,326,328,330],{"class":59,"line":315},16,[57,317,281],{"class":63},[57,319,284],{"class":67},[57,321,208],{"class":71},[57,323,78],{"class":63},[57,325,82],{"class":81},[57,327,215],{"class":85},[57,329,82],{"class":81},[57,331,91],{"class":63},[57,333,335],{"class":59,"line":334},17,[57,336,337],{"class":225},"            Open...\n",[57,339,341,343,345],{"class":59,"line":340},18,[57,342,308],{"class":63},[57,344,284],{"class":67},[57,346,91],{"class":63},[57,348,350,352,355,357,359,361,364,366],{"class":59,"line":349},19,[57,351,281],{"class":63},[57,353,354],{"class":67},"Divider",[57,356,264],{"class":71},[57,358,78],{"class":63},[57,360,82],{"class":81},[57,362,363],{"class":85},"my-xxxs",[57,365,82],{"class":81},[57,367,368],{"class":63}," \u002F>\n",[57,370,372,374,376,378,380,382,384,386,389],{"class":59,"line":371},20,[57,373,281],{"class":63},[57,375,284],{"class":67},[57,377,208],{"class":71},[57,379,78],{"class":63},[57,381,82],{"class":81},[57,383,215],{"class":85},[57,385,82],{"class":81},[57,387,388],{"class":71}," disabled",[57,390,91],{"class":63},[57,392,394],{"class":59,"line":393},21,[57,395,396],{"class":225},"            Exit\n",[57,398,400,402,404],{"class":59,"line":399},22,[57,401,308],{"class":63},[57,403,284],{"class":67},[57,405,91],{"class":63},[57,407,409,412,414],{"class":59,"line":408},23,[57,410,411],{"class":63},"        \u003C\u002F",[57,413,261],{"class":67},[57,415,91],{"class":63},[57,417,419,421,423],{"class":59,"line":418},24,[57,420,232],{"class":63},[57,422,169],{"class":67},[57,424,91],{"class":63},[57,426,428,431,433],{"class":59,"line":427},25,[57,429,430],{"class":63},"    \u003C\u002F",[57,432,191],{"class":190},[57,434,91],{"class":63},[57,436,438,440,442],{"class":59,"line":437},26,[57,439,187],{"class":63},[57,441,191],{"class":190},[57,443,91],{"class":63},[57,445,447,449,451,453,455,457,459,461,463],{"class":59,"line":446},27,[57,448,199],{"class":63},[57,450,202],{"class":67},[57,452,205],{"class":71},[57,454,208],{"class":71},[57,456,78],{"class":63},[57,458,82],{"class":81},[57,460,215],{"class":85},[57,462,82],{"class":81},[57,464,91],{"class":63},[57,466,468],{"class":59,"line":467},28,[57,469,470],{"class":225},"        Edit\n",[57,472,474,476,478],{"class":59,"line":473},29,[57,475,232],{"class":63},[57,477,202],{"class":67},[57,479,91],{"class":63},[57,481,483,485,487,489,491],{"class":59,"line":482},30,[57,484,199],{"class":63},[57,486,169],{"class":67},[57,488,246],{"class":63},[57,490,250],{"class":249},[57,492,91],{"class":63},[57,494,496,498,500,502,504,506,508,510],{"class":59,"line":495},31,[57,497,258],{"class":63},[57,499,261],{"class":67},[57,501,264],{"class":71},[57,503,78],{"class":63},[57,505,82],{"class":81},[57,507,271],{"class":85},[57,509,82],{"class":81},[57,511,91],{"class":63},[57,513,515,517,519,521,523,525,527,529],{"class":59,"line":514},32,[57,516,281],{"class":63},[57,518,284],{"class":67},[57,520,208],{"class":71},[57,522,78],{"class":63},[57,524,82],{"class":81},[57,526,215],{"class":85},[57,528,82],{"class":81},[57,530,91],{"class":63},[57,532,534],{"class":59,"line":533},33,[57,535,536],{"class":225},"            Undo\n",[57,538,540,542,544],{"class":59,"line":539},34,[57,541,308],{"class":63},[57,543,284],{"class":67},[57,545,91],{"class":63},[57,547,549,551,553,555,557,559,561,563],{"class":59,"line":548},35,[57,550,281],{"class":63},[57,552,284],{"class":67},[57,554,208],{"class":71},[57,556,78],{"class":63},[57,558,82],{"class":81},[57,560,215],{"class":85},[57,562,82],{"class":81},[57,564,91],{"class":63},[57,566,568],{"class":59,"line":567},36,[57,569,570],{"class":225},"            Redo\n",[57,572,574,576,578],{"class":59,"line":573},37,[57,575,308],{"class":63},[57,577,284],{"class":67},[57,579,91],{"class":63},[57,581,583,585,587],{"class":59,"line":582},38,[57,584,411],{"class":63},[57,586,261],{"class":67},[57,588,91],{"class":63},[57,590,592,594,596],{"class":59,"line":591},39,[57,593,232],{"class":63},[57,595,169],{"class":67},[57,597,91],{"class":63},[57,599,601,603,605],{"class":59,"line":600},40,[57,602,430],{"class":63},[57,604,191],{"class":190},[57,606,91],{"class":63},[57,608,610,613,615],{"class":59,"line":609},41,[57,611,612],{"class":63},"  \u003C\u002F",[57,614,14],{"class":67},[57,616,91],{"class":63},[57,618,620,622,624],{"class":59,"line":619},42,[57,621,150],{"class":63},[57,623,169],{"class":67},[57,625,91],{"class":63},[627,628,630],"h3",{"id":629},"menubar-props","Menubar Props",[23,632,633,634,640,641,644],{},"Menubar passes all props down to the underlying ",[38,635,637],{"href":636},"\u002Fdocs\u002Fcomponents\u002Fflex",[33,638,639],{},"Flex"," component, so any flex layout props are supported. By default, it uses ",[33,642,643],{},"gap=s"," to space the top-level buttons.",[627,646,648],{"id":647},"menuitem-slots","MenuItem Slots",[650,651,652,668],"table",{},[653,654,655],"thead",{},[656,657,658,662,665],"tr",{},[659,660,661],"th",{},"Name",[659,663,664],{},"Accepts",[659,666,667],{},"Description",[669,670,671,693],"tbody",{},[656,672,673,679,684],{},[674,675,676],"td",{},[33,677,678],{},"default",[674,680,681],{},[33,682,683],{},"any",[674,685,686,687,689,690,692],{},"The trigger element (typically a ",[33,688,202],{}," with size ",[33,691,215],{},")",[656,694,695,699,703],{},[674,696,697],{},[33,698,250],{},[674,700,701],{},[33,702,683],{},[674,704,705,706,710],{},"Content rendered inside ",[38,707,709],{"href":708},"\u002Fdocs\u002Fcomponents\u002Fpopout","Popout"," when item is active",[712,713,714],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html pre.shiki code .snI5G, html code.shiki .snI5G{--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-default:#FDAEB7;--shiki-default-font-style:italic}html pre.shiki code .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}html pre.shiki code .sRTv0, html code.shiki .sRTv0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-default:#80A665}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 .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}",{"title":53,"searchDepth":94,"depth":94,"links":716},[717,718],{"id":629,"depth":147,"text":630},{"id":647,"depth":147,"text":648},"md",{},"\u002Fdocs\u002Fcomponents\u002Fmenubar",{"title":14,"description":25},"docs\u002Fcomponents\u002Fmenubar","Eb0Q4hce9COa3S7nJ-JMs-vlOaUCrDq9ej6JXhM-N7k",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":726},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",1782200882955]