[{"data":1,"prerenderedAt":337},["ShallowReactive",2],{"navigation":3,"\u002Fdocs\u002Fcomponents\u002Fstack-menu":81,"surround-\u002Fdocs\u002Fcomponents\u002Fstack-menu":334},[4],{"title":5,"path":6,"stem":7,"children":8,"page":80},"Docs","\u002Fdocs","docs",[9,28],{"path":6,"stem":7,"title":10,"type":11,"children":12},"Overview","group",[13,19,23],{"title":14,"path":15,"stem":16,"tag":17,"type":18,"children":-1},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F1.introduction",null,"page",{"title":20,"path":21,"stem":22,"tag":17,"type":18,"children":-1},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F2.getting-started",{"path":24,"stem":25,"title":26,"type":27},"\u002Fllms.txt","llms.txt","Llms.txt","asset",{"title":29,"path":30,"stem":31,"children":32,"page":80,"type":11},"Components","\u002Fdocs\u002Fcomponents","docs\u002Fcomponents",[33,39,43,48,52,56,60,64,68,72,76],{"title":34,"path":35,"stem":36,"tag":37,"type":38,"children":-1},"ActionSheet","\u002Fdocs\u002Fcomponents\u002Faction-sheet","docs\u002Fcomponents\u002Faction-sheet","new","component",{"title":40,"path":41,"stem":42,"tag":37,"type":38,"children":-1},"Autocomplete","\u002Fdocs\u002Fcomponents\u002Fautocomplete","docs\u002Fcomponents\u002Fautocomplete",{"title":44,"path":45,"stem":46,"tag":47,"type":38,"children":-1},"Color","\u002Fdocs\u002Fcomponents\u002Fcolor","docs\u002Fcomponents\u002Fcolor","alpha",{"title":49,"path":50,"stem":51,"tag":37,"type":38,"children":-1},"Filters","\u002Fdocs\u002Fcomponents\u002Ffilters","docs\u002Fcomponents\u002Ffilters",{"title":53,"path":54,"stem":55,"tag":37,"type":38,"children":-1},"Gallery","\u002Fdocs\u002Fcomponents\u002Fgallery","docs\u002Fcomponents\u002Fgallery",{"title":57,"path":58,"stem":59,"tag":37,"type":38,"children":-1},"Image","\u002Fdocs\u002Fcomponents\u002Fimage","docs\u002Fcomponents\u002Fimage",{"title":61,"path":62,"stem":63,"tag":37,"type":38,"children":-1},"Image Viewer","\u002Fdocs\u002Fcomponents\u002Fimage-viewer","docs\u002Fcomponents\u002Fimage-viewer",{"title":65,"path":66,"stem":67,"tag":37,"type":38,"children":-1},"PasswordField","\u002Fdocs\u002Fcomponents\u002Fpassword-field","docs\u002Fcomponents\u002Fpassword-field",{"title":69,"path":70,"stem":71,"tag":37,"type":38,"children":-1},"PhoneField","\u002Fdocs\u002Fcomponents\u002Fphone-field","docs\u002Fcomponents\u002Fphone-field",{"title":73,"path":74,"stem":75,"tag":37,"type":38,"children":-1},"Stack Menu","\u002Fdocs\u002Fcomponents\u002Fstack-menu","docs\u002Fcomponents\u002Fstack-menu",{"title":77,"path":78,"stem":79,"tag":37,"type":38,"children":-1},"TimeField","\u002Fdocs\u002Fcomponents\u002Ftime-field","docs\u002Fcomponents\u002Ftime-field",false,{"id":82,"title":73,"body":83,"description":327,"extension":328,"meta":329,"navigation":330,"path":74,"rawbody":331,"seo":332,"stem":75,"tag":37,"__hash__":333},"content\u002Fdocs\u002Fcomponents\u002Fstack-menu.md",{"type":84,"value":85,"toc":314},"minimark",[86,95,99,104,141,145,148,169,187,190,198,202,205,210,214,224,228,233,246,253,257,270,273,279,283],[87,88,89,90,94],"p",{},"Bottom-anchored menu built on the dialog primitive. Items animate from a stacked layout into a list; opening a sub menu repositions surrounding rows. Use it where ",[91,92,93],"code",{},"DropdownMenu"," feels cramped or hover-dependent.",[96,97],"component-preview",{"name":98},"StackMenuDemo",[100,101,103],"h2",{"id":102},"features","Features",[105,106,107,115,121,135],"ul",{},[108,109,110,114],"li",{},[111,112,113],"strong",{},"Mobile-first"," — Opens from the bottom of the viewport with a dimmed overlay",[108,116,117,120],{},[111,118,119],{},"Stacked animation"," — Items transition from stacked to a full list layout",[108,122,123,126,127,130,131,134],{},[111,124,125],{},"Collapsible sub menus"," — ",[91,128,129],{},"StackMenuSub"," hides sibling items and expands nested ",[91,132,133],{},"StackMenuGroup"," content",[108,136,137,140],{},[111,138,139],{},"Composable"," — Same mental model as other menu primitives (trigger, content, group, item)",[100,142,144],{"id":143},"stackmenu-vs-actionsheet","StackMenu vs ActionSheet",[87,146,147],{},"Both components slide up from the bottom with an overlay, but they solve different jobs.",[87,149,150,152,153,156,157,160,161,164,165,168],{},[111,151,34],{}," is modeled after the iOS action sheet: a short, focused list of ",[111,154,155],{},"mutually meaningful choices","—often a primary decision, destructive option, or cancel. It behaves like a ",[111,158,159],{},"blocking confirmation surface"," (similar in spirit to an alert dialog): you typically pick one outcome or dismiss, and it works well with a ",[111,162,163],{},"promise API"," (",[91,166,167],{},"start()",") when async code needs to know what the user chose.",[87,170,171,174,175,178,179,182,183,186],{},[111,172,173],{},"StackMenu"," is a ",[111,176,177],{},"navigation-style overflow menu"," for a screen or row: many commands, optional ",[111,180,181],{},"sub menus",", and the same item can stay available while you drill in and out. It replaces cramped ",[111,184,185],{},"dropdown"," patterns on touch devices rather than posing a single “what do you want to do?” prompt.",[87,188,189],{},"Use ActionSheet when the flow is “choose one action or cancel.” Use StackMenu when the flow is “open a menu of commands (and possibly nested lists) from a trigger.”",[87,191,192,193,197],{},"See also: ",[194,195,196],"a",{"href":35},"Action Sheet",".",[100,199,201],{"id":200},"installation","Installation",[87,203,204],{},"Install from the Vuzeno registry with the shadcn-vue CLI:",[206,207],"installation-tabs",{":exec":208,"command":209},"true","shadcn-vue@latest add https:\u002F\u002Fvuzeno.com\u002Fr\u002Fstack-menu.json",[100,211,213],{"id":212},"anatomy","Anatomy",[215,216,222],"pre",{"className":217,"code":219,"language":220,"meta":221},[218],"language-vue","\u003Ctemplate>\n  \u003CStackMenu>\n    \u003CStackMenuTrigger \u002F>\n\n    \u003CStackMenuContent>\n      \u003CStackMenuGroup>\n        \u003CStackMenuItem \u002F>\n\n        \u003CStackMenuSub>\n          \u003CStackMenuSubTrigger \u002F>\n\n          \u003CStackMenuSubContent>\n            \u003CStackMenuGroup>\n              \u003CStackMenuItem \u002F>\n            \u003C\u002FStackMenuGroup>\n          \u003C\u002FStackMenuSubContent>\n        \u003C\u002FStackMenuSub>\n      \u003C\u002FStackMenuGroup>\n    \u003C\u002FStackMenuContent>\n  \u003C\u002FStackMenu>\n\u003C\u002Ftemplate>\n","vue","",[91,223,219],{"__ignoreMap":221},[100,225,227],{"id":226},"examples","Examples",[229,230,232],"h3",{"id":231},"basic-usage","Basic usage",[87,234,235,236,239,240,243,244,197],{},"Control visibility with ",[91,237,238],{},"StackMenuTrigger"," and compose rows with ",[91,241,242],{},"StackMenuItem"," inside ",[91,245,133],{},[215,247,251],{"className":248,"code":249,"language":220,"meta":250},[218],"\u003Cscript setup lang=\"ts\">\nimport {\n  StackMenu,\n  StackMenuContent,\n  StackMenuGroup,\n  StackMenuItem,\n  StackMenuTrigger,\n} from \"@vuzeno\u002Fregistry\u002Fui\u002Fstack-menu\";\nimport { Button } from \"@\u002Fcomponents\u002Fbutton\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CStackMenu>\n    \u003CStackMenuTrigger>\n      \u003CButton variant=\"outline\">Open\u003C\u002FButton>\n    \u003C\u002FStackMenuTrigger>\n\n    \u003CStackMenuContent>\n      \u003CStackMenuGroup>\n        \u003CStackMenuItem>Edit\u003C\u002FStackMenuItem>\n        \u003CStackMenuItem>Duplicate\u003C\u002FStackMenuItem>\n        \u003CStackMenuItem>Delete\u003C\u002FStackMenuItem>\n      \u003C\u002FStackMenuGroup>\n    \u003C\u002FStackMenuContent>\n  \u003C\u002FStackMenu>\n\u003C\u002Ftemplate>\n","showLineNumbers",[91,252,249],{"__ignoreMap":221},[229,254,256],{"id":255},"with-sub-menu","With sub menu",[87,258,259,260,262,263,266,267,197],{},"Wrap expandable sections in ",[91,261,129],{},". The trigger must be ",[91,264,265],{},"StackMenuSubTrigger","; nested items live in ",[91,268,269],{},"StackMenuSubContent",[96,271],{"name":272},"StackMenuSubDemo",[215,274,277],{"className":275,"code":276,"language":220,"meta":250},[218],"\u003Ctemplate>\n  \u003CStackMenuContent>\n    \u003CStackMenuGroup>\n      \u003CStackMenuItem>Home\u003C\u002FStackMenuItem>\n\n      \u003CStackMenuSub>\n        \u003CStackMenuSubTrigger>Projects\u003C\u002FStackMenuSubTrigger>\n\n        \u003CStackMenuSubContent>\n          \u003CStackMenuGroup>\n            \u003CStackMenuItem>Web app\u003C\u002FStackMenuItem>\n            \u003CStackMenuItem>Mobile\u003C\u002FStackMenuItem>\n          \u003C\u002FStackMenuGroup>\n        \u003C\u002FStackMenuSubContent>\n      \u003C\u002FStackMenuSub>\n\n      \u003CStackMenuItem>Settings\u003C\u002FStackMenuItem>\n    \u003C\u002FStackMenuGroup>\n  \u003C\u002FStackMenuContent>\n\u003C\u002Ftemplate>\n",[91,278,276],{"__ignoreMap":221},[100,280,282],{"id":281},"limitations","Limitations",[105,284,285,293,299,308],{},[108,286,287,126,290,292],{},[111,288,289],{},"No group labels",[91,291,133],{}," does not provide a label slot; use plain items or custom markup if needed later.",[108,294,295,298],{},[111,296,297],{},"No scrolling"," — Long lists are not scrollable; excess items can be clipped at the bottom of the screen.",[108,300,301,304,305,307],{},[111,302,303],{},"Single open sub menu"," — Only one ",[91,306,129],{}," should be expanded at a time; multiple open subs are not supported.",[108,309,310,313],{},[111,311,312],{},"Fixed row height"," — Layout math assumes a constant item height; deeply custom content sizes may misalign animations.",{"title":221,"searchDepth":315,"depth":315,"links":316},2,[317,318,319,320,321,326],{"id":102,"depth":315,"text":103},{"id":143,"depth":315,"text":144},{"id":200,"depth":315,"text":201},{"id":212,"depth":315,"text":213},{"id":226,"depth":315,"text":227,"children":322},[323,325],{"id":231,"depth":324,"text":232},3,{"id":255,"depth":324,"text":256},{"id":281,"depth":315,"text":282},"A mobile-friendly bottom menu with stacked items and collapsible sub menus, as an alternative to dropdown menus on small screens.","md",{},true,"---\ntitle: Stack Menu\ndescription: A mobile-friendly bottom menu with stacked items and collapsible sub menus, as an alternative to dropdown menus on small screens.\ntag: new\n---\n\nBottom-anchored menu built on the dialog primitive. Items animate from a stacked layout into a list; opening a sub menu repositions surrounding rows. Use it where `DropdownMenu` feels cramped or hover-dependent.\n\n::component-preview\n---\nname: StackMenuDemo\n---\n::\n\n## Features\n\n- **Mobile-first** — Opens from the bottom of the viewport with a dimmed overlay\n- **Stacked animation** — Items transition from stacked to a full list layout\n- **Collapsible sub menus** — `StackMenuSub` hides sibling items and expands nested `StackMenuGroup` content\n- **Composable** — Same mental model as other menu primitives (trigger, content, group, item)\n\n## StackMenu vs ActionSheet\n\nBoth components slide up from the bottom with an overlay, but they solve different jobs.\n\n**ActionSheet** is modeled after the iOS action sheet: a short, focused list of **mutually meaningful choices**—often a primary decision, destructive option, or cancel. It behaves like a **blocking confirmation surface** (similar in spirit to an alert dialog): you typically pick one outcome or dismiss, and it works well with a **promise API** (`start()`) when async code needs to know what the user chose.\n\n**StackMenu** is a **navigation-style overflow menu** for a screen or row: many commands, optional **sub menus**, and the same item can stay available while you drill in and out. It replaces cramped **dropdown** patterns on touch devices rather than posing a single “what do you want to do?” prompt.\n\nUse ActionSheet when the flow is “choose one action or cancel.” Use StackMenu when the flow is “open a menu of commands (and possibly nested lists) from a trigger.”\n\nSee also: [Action Sheet](\u002Fdocs\u002Fcomponents\u002Faction-sheet).\n\n## Installation\n\nInstall from the Vuzeno registry with the shadcn-vue CLI:\n\n::installation-tabs\n---\ncommand: shadcn-vue@latest add https:\u002F\u002Fvuzeno.com\u002Fr\u002Fstack-menu.json\nexec: true\n---\n::\n\n## Anatomy\n\n```vue\n\u003Ctemplate>\n  \u003CStackMenu>\n    \u003CStackMenuTrigger \u002F>\n\n    \u003CStackMenuContent>\n      \u003CStackMenuGroup>\n        \u003CStackMenuItem \u002F>\n\n        \u003CStackMenuSub>\n          \u003CStackMenuSubTrigger \u002F>\n\n          \u003CStackMenuSubContent>\n            \u003CStackMenuGroup>\n              \u003CStackMenuItem \u002F>\n            \u003C\u002FStackMenuGroup>\n          \u003C\u002FStackMenuSubContent>\n        \u003C\u002FStackMenuSub>\n      \u003C\u002FStackMenuGroup>\n    \u003C\u002FStackMenuContent>\n  \u003C\u002FStackMenu>\n\u003C\u002Ftemplate>\n```\n\n## Examples\n\n### Basic usage\n\nControl visibility with `StackMenuTrigger` and compose rows with `StackMenuItem` inside `StackMenuGroup`.\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport {\n  StackMenu,\n  StackMenuContent,\n  StackMenuGroup,\n  StackMenuItem,\n  StackMenuTrigger,\n} from \"@vuzeno\u002Fregistry\u002Fui\u002Fstack-menu\";\nimport { Button } from \"@\u002Fcomponents\u002Fbutton\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CStackMenu>\n    \u003CStackMenuTrigger>\n      \u003CButton variant=\"outline\">Open\u003C\u002FButton>\n    \u003C\u002FStackMenuTrigger>\n\n    \u003CStackMenuContent>\n      \u003CStackMenuGroup>\n        \u003CStackMenuItem>Edit\u003C\u002FStackMenuItem>\n        \u003CStackMenuItem>Duplicate\u003C\u002FStackMenuItem>\n        \u003CStackMenuItem>Delete\u003C\u002FStackMenuItem>\n      \u003C\u002FStackMenuGroup>\n    \u003C\u002FStackMenuContent>\n  \u003C\u002FStackMenu>\n\u003C\u002Ftemplate>\n```\n\n### With sub menu\n\nWrap expandable sections in `StackMenuSub`. The trigger must be `StackMenuSubTrigger`; nested items live in `StackMenuSubContent`.\n\n::component-preview\n---\nname: StackMenuSubDemo\n---\n::\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CStackMenuContent>\n    \u003CStackMenuGroup>\n      \u003CStackMenuItem>Home\u003C\u002FStackMenuItem>\n\n      \u003CStackMenuSub>\n        \u003CStackMenuSubTrigger>Projects\u003C\u002FStackMenuSubTrigger>\n\n        \u003CStackMenuSubContent>\n          \u003CStackMenuGroup>\n            \u003CStackMenuItem>Web app\u003C\u002FStackMenuItem>\n            \u003CStackMenuItem>Mobile\u003C\u002FStackMenuItem>\n          \u003C\u002FStackMenuGroup>\n        \u003C\u002FStackMenuSubContent>\n      \u003C\u002FStackMenuSub>\n\n      \u003CStackMenuItem>Settings\u003C\u002FStackMenuItem>\n    \u003C\u002FStackMenuGroup>\n  \u003C\u002FStackMenuContent>\n\u003C\u002Ftemplate>\n```\n\n## Limitations\n\n- **No group labels** — `StackMenuGroup` does not provide a label slot; use plain items or custom markup if needed later.\n- **No scrolling** — Long lists are not scrollable; excess items can be clipped at the bottom of the screen.\n- **Single open sub menu** — Only one `StackMenuSub` should be expanded at a time; multiple open subs are not supported.\n- **Fixed row height** — Layout math assumes a constant item height; deeply custom content sizes may misalign animations.\n",{"title":73,"description":327},"KkWPDDtkNvdpTWYmpE2re_YiDhtjJwU4Bkh-eHuYdjY",[335,336],{"title":69,"path":70,"stem":71,"children":-1},{"title":77,"path":78,"stem":79,"children":-1},1776068041783]