[{"data":1,"prerenderedAt":728},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":437,"/docs/components/mega-menu":450,"surround-/docs/components/mega-menu":725},[4],{"title":5,"path":6,"stem":7,"children":8,"page":17},"Docs","/docs","docs",[9,90,385,392,398,411],{"path":6,"stem":7,"title":10,"type":11,"children":12},"Get Started","group",[13,19,44,48,52,70,74,78,82,86],{"title":14,"path":15,"stem":16,"new":17,"type":18,"children":-1},"Introduction","/docs/introduction","docs/01.introduction",false,"page",{"title":20,"path":21,"stem":22,"children":23,"new":17,"type":11},"Installation","/docs/installation","docs/02.installation",[24,28,32,36,40],{"title":25,"path":26,"stem":27,"new":17,"type":18,"children":-1},"Vite","/docs/installation/vite","docs/installation/01.vite",{"title":29,"path":30,"stem":31,"new":17,"type":18,"children":-1},"Nuxt","/docs/installation/nuxt","docs/installation/02.nuxt",{"title":33,"path":34,"stem":35,"new":17,"type":18,"children":-1},"Astro","/docs/installation/astro","docs/installation/03.astro",{"title":37,"path":38,"stem":39,"new":17,"type":18,"children":-1},"Laravel","/docs/installation/laravel","docs/installation/04.laravel",{"title":41,"path":42,"stem":43,"new":17,"type":18,"children":-1},"Manual Installation","/docs/installation/manual","docs/installation/05.manual",{"title":45,"path":46,"stem":47,"new":17,"type":18,"children":-1},"components.json","/docs/components-json","docs/03.components-json",{"title":49,"path":50,"stem":51,"new":17,"type":18,"children":-1},"Theming","/docs/theming","docs/04.theming",{"title":53,"path":54,"stem":55,"children":56,"new":17,"type":11},"Dark Mode","/docs/dark-mode","docs/05.dark-mode",[57,60,63,67],{"title":25,"path":58,"stem":59,"new":17,"type":18,"children":-1},"/docs/dark-mode/vite","docs/dark-mode/01.vite",{"title":29,"path":61,"stem":62,"new":17,"type":18,"children":-1},"/docs/dark-mode/nuxt","docs/dark-mode/02.nuxt",{"title":64,"path":65,"stem":66,"new":17,"type":18,"children":-1},"Vitepress","/docs/dark-mode/vitepress","docs/dark-mode/03.vitepress",{"title":33,"path":68,"stem":69,"new":17,"type":18,"children":-1},"/docs/dark-mode/astro","docs/dark-mode/04.astro",{"title":71,"path":72,"stem":73,"new":17,"type":18,"children":-1},"CLI","/docs/cli","docs/06.cli",{"title":75,"path":76,"stem":77,"new":17,"type":18,"children":-1},"JavaScript","/docs/javascript","docs/07.javascript",{"title":79,"path":80,"stem":81,"new":17,"type":18,"children":-1},"Figma","/docs/figma","docs/09.figma",{"title":83,"path":84,"stem":85,"new":17,"type":18,"children":-1},"Changelog","/docs/changelog","docs/10.changelog",{"title":87,"path":88,"stem":89,"new":17,"type":18,"children":-1},"Legacy Docs","/docs/legacy","docs/11.legacy",{"title":91,"path":92,"stem":93,"children":94,"new":17,"type":11},"Components","/docs/components","docs/02.components",[95,100,104,108,112,116,120,124,128,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301,305,309,313,317,321,325,329,333,337,341,345,349,353,357,361,365,369,373,377,381],{"title":96,"path":97,"stem":98,"new":17,"type":99,"children":-1},"Accordion","/docs/components/accordion","docs/components/accordion","component",{"title":101,"path":102,"stem":103,"new":17,"type":99,"children":-1},"Alert","/docs/components/alert","docs/components/alert",{"title":105,"path":106,"stem":107,"new":17,"type":99,"children":-1},"Alert Dialog","/docs/components/alert-dialog","docs/components/alert-dialog",{"title":109,"path":110,"stem":111,"new":17,"type":99,"children":-1},"Aspect Ratio","/docs/components/aspect-ratio","docs/components/aspect-ratio",{"title":113,"path":114,"stem":115,"new":17,"type":99,"children":-1},"Avatar","/docs/components/avatar","docs/components/avatar",{"title":117,"path":118,"stem":119,"new":17,"type":99,"children":-1},"Badge","/docs/components/badge","docs/components/badge",{"title":121,"path":122,"stem":123,"new":17,"type":99,"children":-1},"Breadcrumb","/docs/components/breadcrumb","docs/components/breadcrumb",{"title":125,"path":126,"stem":127,"new":17,"type":99,"children":-1},"Button","/docs/components/button","docs/components/button",{"title":129,"path":130,"stem":131,"new":132,"type":99,"children":-1},"Button Group","/docs/components/button-group","docs/components/button-group",true,{"title":134,"path":135,"stem":136,"new":17,"type":99,"children":-1},"Calendar","/docs/components/calendar","docs/components/calendar",{"title":138,"path":139,"stem":140,"new":17,"type":99,"children":-1},"Card","/docs/components/card","docs/components/card",{"title":142,"path":143,"stem":144,"new":17,"type":99,"children":-1},"Carousel","/docs/components/carousel","docs/components/carousel",{"title":146,"path":147,"stem":148,"new":17,"type":99,"children":-1},"Chart","/docs/components/chart","docs/components/chart",{"title":150,"path":151,"stem":152,"new":17,"type":99,"children":-1},"Checkbox","/docs/components/checkbox","docs/components/checkbox",{"title":154,"path":155,"stem":156,"new":17,"type":99,"children":-1},"Collapsible","/docs/components/collapsible","docs/components/collapsible",{"title":158,"path":159,"stem":160,"new":17,"type":99,"children":-1},"Combobox","/docs/components/combobox","docs/components/combobox",{"title":162,"path":163,"stem":164,"new":17,"type":99,"children":-1},"Command","/docs/components/command","docs/components/command",{"title":166,"path":167,"stem":168,"new":17,"type":99,"children":-1},"Context Menu","/docs/components/context-menu","docs/components/context-menu",{"title":170,"path":171,"stem":172,"new":17,"type":99,"children":-1},"Data Table","/docs/components/data-table","docs/components/data-table",{"title":174,"path":175,"stem":176,"new":17,"type":99,"children":-1},"Date Picker","/docs/components/date-picker","docs/components/date-picker",{"title":178,"path":179,"stem":180,"new":17,"type":99,"children":-1},"Dialog","/docs/components/dialog","docs/components/dialog",{"title":182,"path":183,"stem":184,"new":17,"type":99,"children":-1},"Drawer","/docs/components/drawer","docs/components/drawer",{"title":186,"path":187,"stem":188,"new":17,"type":99,"children":-1},"Dropdown Menu","/docs/components/dropdown-menu","docs/components/dropdown-menu",{"title":190,"path":191,"stem":192,"new":132,"type":99,"children":-1},"Empty","/docs/components/empty","docs/components/empty",{"title":194,"path":195,"stem":196,"new":17,"type":99,"children":-1},"Fancy Button","/docs/components/fancy-button","docs/components/fancy-button",{"title":198,"path":199,"stem":200,"new":132,"type":99,"children":-1},"Field","/docs/components/field","docs/components/field",{"title":202,"path":203,"stem":204,"new":17,"type":99,"children":-1},"Filter","/docs/components/filter","docs/components/filter",{"title":206,"path":207,"stem":208,"new":17,"type":99,"children":-1},"Form","/docs/components/form","docs/components/form",{"title":210,"path":211,"stem":212,"new":17,"type":99,"children":-1},"Hover Card","/docs/components/hover-card","docs/components/hover-card",{"title":214,"path":215,"stem":216,"new":17,"type":99,"children":-1},"Input","/docs/components/input","docs/components/input",{"title":218,"path":219,"stem":220,"new":132,"type":99,"children":-1},"Input Group","/docs/components/input-group","docs/components/input-group",{"title":222,"path":223,"stem":224,"new":17,"type":99,"children":-1},"Input OTP","/docs/components/input-otp","docs/components/input-otp",{"title":226,"path":227,"stem":228,"new":132,"type":99,"children":-1},"Item","/docs/components/item","docs/components/item",{"title":230,"path":231,"stem":232,"new":132,"type":99,"children":-1},"Kbd","/docs/components/kbd","docs/components/kbd",{"title":234,"path":235,"stem":236,"new":17,"type":99,"children":-1},"Label","/docs/components/label","docs/components/label",{"title":238,"path":239,"stem":240,"new":17,"type":99,"children":-1},"Mega Menu","/docs/components/mega-menu","docs/components/mega-menu",{"title":242,"path":243,"stem":244,"new":17,"type":99,"children":-1},"Menubar","/docs/components/menubar","docs/components/menubar",{"title":246,"path":247,"stem":248,"new":132,"type":99,"children":-1},"Native Select","/docs/components/native-select","docs/components/native-select",{"title":250,"path":251,"stem":252,"new":17,"type":99,"children":-1},"Navigation Menu","/docs/components/navigation-menu","docs/components/navigation-menu",{"title":254,"path":255,"stem":256,"new":17,"type":99,"children":-1},"Number Field","/docs/components/number-field","docs/components/number-field",{"title":258,"path":259,"stem":260,"new":17,"type":99,"children":-1},"Pagination","/docs/components/pagination","docs/components/pagination",{"title":262,"path":263,"stem":264,"new":17,"type":99,"children":-1},"Pin Input","/docs/components/pin-input","docs/components/pin-input",{"title":266,"path":267,"stem":268,"new":17,"type":99,"children":-1},"Popover","/docs/components/popover","docs/components/popover",{"title":270,"path":271,"stem":272,"new":17,"type":99,"children":-1},"Progress","/docs/components/progress","docs/components/progress",{"title":274,"path":275,"stem":276,"new":17,"type":99,"children":-1},"Radio Group","/docs/components/radio-group","docs/components/radio-group",{"title":278,"path":279,"stem":280,"new":17,"type":99,"children":-1},"Radio Stack","/docs/components/radio-stack","docs/components/radio-stack",{"title":282,"path":283,"stem":284,"new":17,"type":99,"children":-1},"Range Calendar","/docs/components/range-calendar","docs/components/range-calendar",{"title":286,"path":287,"stem":288,"new":17,"type":99,"children":-1},"Range Slider","/docs/components/range-slider","docs/components/range-slider",{"title":290,"path":291,"stem":292,"new":17,"type":99,"children":-1},"Rating","/docs/components/rating","docs/components/rating",{"title":294,"path":295,"stem":296,"new":17,"type":99,"children":-1},"Resizable","/docs/components/resizable","docs/components/resizable",{"title":298,"path":299,"stem":300,"new":17,"type":99,"children":-1},"Scroll Area","/docs/components/scroll-area","docs/components/scroll-area",{"title":302,"path":303,"stem":304,"new":17,"type":99,"children":-1},"Select","/docs/components/select","docs/components/select",{"title":306,"path":307,"stem":308,"new":17,"type":99,"children":-1},"Separator","/docs/components/separator","docs/components/separator",{"title":310,"path":311,"stem":312,"new":17,"type":99,"children":-1},"Sheet","/docs/components/sheet","docs/components/sheet",{"title":314,"path":315,"stem":316,"new":17,"type":99,"children":-1},"Sidebar","/docs/components/sidebar","docs/components/sidebar",{"title":318,"path":319,"stem":320,"new":17,"type":99,"children":-1},"Skeleton","/docs/components/skeleton","docs/components/skeleton",{"title":322,"path":323,"stem":324,"new":17,"type":99,"children":-1},"Slider","/docs/components/slider","docs/components/slider",{"title":326,"path":327,"stem":328,"new":17,"type":99,"children":-1},"Sonner","/docs/components/sonner","docs/components/sonner",{"title":330,"path":331,"stem":332,"new":132,"type":99,"children":-1},"Spinner","/docs/components/spinner","docs/components/spinner",{"title":334,"path":335,"stem":336,"new":17,"type":99,"children":-1},"Stepper","/docs/components/stepper","docs/components/stepper",{"title":338,"path":339,"stem":340,"new":17,"type":99,"children":-1},"Swatch","/docs/components/swatch","docs/components/swatch",{"title":342,"path":343,"stem":344,"new":17,"type":99,"children":-1},"Swatch Group","/docs/components/swatch-group","docs/components/swatch-group",{"title":346,"path":347,"stem":348,"new":17,"type":99,"children":-1},"Switch","/docs/components/switch","docs/components/switch",{"title":350,"path":351,"stem":352,"new":17,"type":99,"children":-1},"Table","/docs/components/table","docs/components/table",{"title":354,"path":355,"stem":356,"new":17,"type":99,"children":-1},"Tabs","/docs/components/tabs","docs/components/tabs",{"title":358,"path":359,"stem":360,"new":17,"type":99,"children":-1},"Tags Input","/docs/components/tags-input","docs/components/tags-input",{"title":362,"path":363,"stem":364,"new":17,"type":99,"children":-1},"Textarea","/docs/components/textarea","docs/components/textarea",{"title":366,"path":367,"stem":368,"new":17,"type":99,"children":-1},"Toast","/docs/components/toast","docs/components/toast",{"title":370,"path":371,"stem":372,"new":17,"type":99,"children":-1},"Toggle","/docs/components/toggle","docs/components/toggle",{"title":374,"path":375,"stem":376,"new":17,"type":99,"children":-1},"Toggle Group","/docs/components/toggle-group","docs/components/toggle-group",{"title":378,"path":379,"stem":380,"new":17,"type":99,"children":-1},"Tooltip","/docs/components/tooltip","docs/components/tooltip",{"title":382,"path":383,"stem":384,"new":17,"type":99,"children":-1},"Typography","/docs/components/typography","docs/components/typography",{"title":20,"path":21,"stem":22,"children":386,"new":17,"type":11},[387,388,389,390,391],{"title":25,"path":26,"stem":27,"new":17,"type":18,"children":-1},{"title":29,"path":30,"stem":31,"new":17,"type":18,"children":-1},{"title":33,"path":34,"stem":35,"new":17,"type":18,"children":-1},{"title":37,"path":38,"stem":39,"new":17,"type":18,"children":-1},{"title":41,"path":42,"stem":43,"new":17,"type":18,"children":-1},{"title":53,"path":54,"stem":55,"children":393,"new":17,"type":11},[394,395,396,397],{"title":25,"path":58,"stem":59,"new":17,"type":18,"children":-1},{"title":29,"path":61,"stem":62,"new":17,"type":18,"children":-1},{"title":64,"path":65,"stem":66,"new":17,"type":18,"children":-1},{"title":33,"path":68,"stem":69,"new":17,"type":18,"children":-1},{"title":399,"path":400,"stem":401,"children":402,"new":17,"type":11},"Forms","/docs/forms","docs/forms",[403,407],{"title":404,"path":405,"stem":406,"new":17,"type":18,"children":-1},"VeeValidate","/docs/forms/vee-validate","docs/forms/01.vee-validate",{"title":408,"path":409,"stem":410,"new":17,"type":18,"children":-1},"TanStack Form","/docs/forms/tanstack-form","docs/forms/02.tanstack-form",{"title":412,"path":413,"stem":414,"children":415,"new":17,"type":11},"Registry","/docs/registry","docs/registry/index",[416,417,421,425,429,433],{"title":412,"path":413,"stem":414,"new":17,"type":18,"children":-1},{"title":418,"path":419,"stem":420,"new":17,"type":18,"children":-1},"Examples","/docs/registry/examples","docs/registry/examples",{"title":422,"path":423,"stem":424,"new":17,"type":18,"children":-1},"FAQ","/docs/registry/faq","docs/registry/faq",{"title":426,"path":427,"stem":428,"new":17,"type":18,"children":-1},"Getting Started","/docs/registry/getting-started","docs/registry/getting-started",{"title":430,"path":431,"stem":432,"new":17,"type":18,"children":-1},"registry-item.json","/docs/registry/registry-item-json","docs/registry/registry-item-json",{"title":434,"path":435,"stem":436,"new":17,"type":18,"children":-1},"registry.json","/docs/registry/registry-json","docs/registry/registry-json",{"repo":438},{"id":439,"name":440,"repo":441,"description":442,"createdAt":443,"updatedAt":444,"pushedAt":445,"stars":446,"watchers":447,"forks":448,"defaultBranch":449},658791894,"shadcn-vue","unovue/shadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-02-27T07:52:29Z","2026-02-19T05:27:01Z",9468,37,617,"dev",{"id":451,"title":238,"body":452,"description":718,"extension":719,"links":720,"meta":721,"navigation":132,"new":17,"path":239,"rawbody":722,"seo":723,"stem":240,"__hash__":724},"content/docs/components/mega-menu.md",{"type":453,"value":454,"toc":707},"minimark",[455,459,516,520,529,533,542,553,558,591,594,674,678,685,693],[456,457,20],"h2",{"id":458},"installation",[460,461,462,478,492],"code-tabs",{},[463,464,465,472],"tabs-list",{},[466,467,469],"tabs-trigger",{"value":468},"cli",[470,471,71],"p",{},[466,473,475],{"value":474},"manual",[470,476,477],{},"Manual",[479,480,481],"tabs-content",{"value":468},[482,483,489],"pre",{"className":484,"code":486,"language":487,"meta":488},[485],"language-bash","npx @frontic/ui add mega-menu\n","bash","",[490,491,486],"code",{"__ignoreMap":488},[479,493,494],{"value":474},[495,496,497,511],"steps",{},[498,499,500],"step",{},[470,501,502,503,510],{},"Copy and paste the ",[504,505,509],"a",{"href":506,"rel":507},"https://github.com/frontic/frontic-ui/tree/main/packages/registry/registry/default/ui/mega-menu",[508],"nofollow","GitHub source code"," into your project.",[498,512,513],{},[470,514,515],{},"Update the import paths to match your project setup.",[456,517,519],{"id":518},"usage","Usage",[482,521,527],{"className":522,"code":524,"language":525,"meta":526},[523],"language-vue","\u003Cscript setup lang=\"ts\">\nimport {\n  MegaMenu,\n  MegaMenuContent,\n  MegaMenuItem,\n  MegaMenuLink,\n  MegaMenuList,\n  MegaMenuTrigger,\n} from '@/components/ui/mega-menu'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CMegaMenu>\n    \u003CMegaMenuList>\n      \u003CMegaMenuItem>\n        \u003CMegaMenuTrigger>\n          Category\n        \u003C/MegaMenuTrigger>\n        \u003CMegaMenuContent>\n          \u003C!-- Full-width mega-menu panel content -->\n        \u003C/MegaMenuContent>\n      \u003C/MegaMenuItem>\n    \u003C/MegaMenuList>\n  \u003C/MegaMenu>\n\u003C/template>\n","vue","showLineNumbers",[490,528,524],{"__ignoreMap":488},[456,530,532],{"id":531},"about","About",[470,534,535,536,541],{},"The Mega Menu component provides full-width dropdown panels for navigation, built on ",[504,537,540],{"href":538,"rel":539},"https://reka-ui.com/docs/components/navigation-menu",[508],"reka-ui NavigationMenu"," primitives.",[470,543,544,545,548,549,552],{},"Unlike the standard ",[490,546,547],{},"NavigationMenu"," (which renders compact, viewport-measured dropdowns), the Mega Menu uses ",[490,550,551],{},"position: fixed"," to span the full viewport width — ideal for store navigation headers with featured images, link sections, and promotional content.",[554,555,557],"h3",{"id":556},"key-differences-from-navigationmenu","Key differences from NavigationMenu",[559,560,561,569,575,585],"ul",{},[562,563,564,568],"li",{},[565,566,567],"strong",{},"Full-width panels",": Content spans the entire viewport width using fixed positioning",[562,570,571,574],{},[565,572,573],{},"Auto top positioning",": Automatically calculates the top offset from the root element's bottom edge",[562,576,577,580,581,584],{},[565,578,579],{},"No viewport",": Does not use ",[490,582,583],{},"NavigationMenuViewport"," — content is positioned directly",[562,586,587,590],{},[565,588,589],{},"Headless trigger",": No built-in chevron or indicator — the consumer decides the trigger style",[554,592,91],{"id":593},"components",[595,596,597,610],"table",{},[598,599,600],"thead",{},[601,602,603,607],"tr",{},[604,605,606],"th",{},"Component",[604,608,609],{},"Description",[611,612,613,624,634,644,654,664],"tbody",{},[601,614,615,621],{},[616,617,618],"td",{},[490,619,620],{},"MegaMenu",[616,622,623],{},"Root wrapper. Provides positioning context via inject.",[601,625,626,631],{},[616,627,628],{},[490,629,630],{},"MegaMenuList",[616,632,633],{},"Container for menu items.",[601,635,636,641],{},[616,637,638],{},[490,639,640],{},"MegaMenuItem",[616,642,643],{},"Individual menu item wrapper.",[601,645,646,651],{},[616,647,648],{},[490,649,650],{},"MegaMenuTrigger",[616,652,653],{},"Trigger button. Slot-only — add your own chevron or indicator.",[601,655,656,661],{},[616,657,658],{},[490,659,660],{},"MegaMenuContent",[616,662,663],{},"Full-width fixed panel with fade + zoom animations.",[601,665,666,671],{},[616,667,668],{},[490,669,670],{},"MegaMenuLink",[616,672,673],{},"Link wrapper with proper navigation semantics.",[554,675,677],{"id":676},"composable","Composable",[470,679,680,681,684],{},"The ",[490,682,683],{},"useMegaMenu"," composable is available for advanced use cases:",[482,686,691],{"className":687,"code":689,"language":690,"meta":488},[688],"language-ts","import { useMegaMenu } from '@/components/ui/mega-menu'\n\nconst { megaMenuTop, updateTop } = useMegaMenu()\n","ts",[490,692,689],{"__ignoreMap":488},[559,694,695,701],{},[562,696,697,700],{},[490,698,699],{},"megaMenuTop"," — Reactive ref with the calculated top position",[562,702,703,706],{},[490,704,705],{},"updateTop()"," — Recalculate the top position (useful for sticky headers)",{"title":488,"searchDepth":708,"depth":708,"links":709},2,[710,711,712],{"id":458,"depth":708,"text":20},{"id":518,"depth":708,"text":519},{"id":531,"depth":708,"text":532,"children":713},[714,716,717],{"id":556,"depth":715,"text":557},3,{"id":593,"depth":715,"text":91},{"id":676,"depth":715,"text":677},"Full-width dropdown navigation menu for mega-menu panels that span the viewport width.","md",null,{"component":132},"---\ntitle: Mega Menu\ndescription: Full-width dropdown navigation menu for mega-menu panels that span the viewport width.\ncomponent: true\n---\n\n## Installation\n\n::code-tabs\n\n::tabs-list\n\n  ::tabs-trigger{value=\"cli\"}\n  CLI\n  ::\n\n  ::tabs-trigger{value=\"manual\"}\n  Manual\n  ::\n\n::\n\n::tabs-content{value=\"cli\"}\n\n```bash\nnpx @frontic/ui add mega-menu\n```\n\n::\n\n::tabs-content{value=\"manual\"}\n  ::steps\n    ::step\n    Copy and paste the [GitHub source code](https://github.com/frontic/frontic-ui/tree/main/packages/registry/registry/default/ui/mega-menu) into your project.\n    ::\n\n    ::step\n    Update the import paths to match your project setup.\n    ::\n  ::\n::\n\n::\n\n## Usage\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport {\n  MegaMenu,\n  MegaMenuContent,\n  MegaMenuItem,\n  MegaMenuLink,\n  MegaMenuList,\n  MegaMenuTrigger,\n} from '@/components/ui/mega-menu'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CMegaMenu>\n    \u003CMegaMenuList>\n      \u003CMegaMenuItem>\n        \u003CMegaMenuTrigger>\n          Category\n        \u003C/MegaMenuTrigger>\n        \u003CMegaMenuContent>\n          \u003C!-- Full-width mega-menu panel content -->\n        \u003C/MegaMenuContent>\n      \u003C/MegaMenuItem>\n    \u003C/MegaMenuList>\n  \u003C/MegaMenu>\n\u003C/template>\n```\n\n## About\n\nThe Mega Menu component provides full-width dropdown panels for navigation, built on [reka-ui NavigationMenu](https://reka-ui.com/docs/components/navigation-menu) primitives.\n\nUnlike the standard `NavigationMenu` (which renders compact, viewport-measured dropdowns), the Mega Menu uses `position: fixed` to span the full viewport width — ideal for store navigation headers with featured images, link sections, and promotional content.\n\n### Key differences from NavigationMenu\n\n- **Full-width panels**: Content spans the entire viewport width using fixed positioning\n- **Auto top positioning**: Automatically calculates the top offset from the root element's bottom edge\n- **No viewport**: Does not use `NavigationMenuViewport` — content is positioned directly\n- **Headless trigger**: No built-in chevron or indicator — the consumer decides the trigger style\n\n### Components\n\n| Component | Description |\n|---|---|\n| `MegaMenu` | Root wrapper. Provides positioning context via inject. |\n| `MegaMenuList` | Container for menu items. |\n| `MegaMenuItem` | Individual menu item wrapper. |\n| `MegaMenuTrigger` | Trigger button. Slot-only — add your own chevron or indicator. |\n| `MegaMenuContent` | Full-width fixed panel with fade + zoom animations. |\n| `MegaMenuLink` | Link wrapper with proper navigation semantics. |\n\n### Composable\n\nThe `useMegaMenu` composable is available for advanced use cases:\n\n```ts\nimport { useMegaMenu } from '@/components/ui/mega-menu'\n\nconst { megaMenuTop, updateTop } = useMegaMenu()\n```\n\n- `megaMenuTop` — Reactive ref with the calculated top position\n- `updateTop()` — Recalculate the top position (useful for sticky headers)\n",{"title":238,"description":718},"Jvc-dI0rzy7wUM7K5bCyDDvPOVEK2z_q1N5RRd8qe-E",[726,727],{"title":234,"path":235,"stem":236,"children":-1},{"title":242,"path":243,"stem":244,"children":-1},1772186030742]