mega-menu

Mega Menu

Store navigation whose flyouts span the bar's full width, for link columns and featured tiles; panels slide between categories and the height follows.

States: Default, Focus

Parts

Part	File	Does
MegaMenu	MegaMenu.vue	Groups all parts of the mega menu.
MegaMenuContent	MegaMenuContent.vue	Holds the links and content shown when its menu item is open.
MegaMenuItem	MegaMenuItem.vue	Groups a trigger with the content it opens in the mega menu.
MegaMenuLink	MegaMenuLink.vue	Links to a page from inside the mega menu.
MegaMenuList	MegaMenuList.vue	Lists the top-level items of the mega menu.
MegaMenuTrigger	MegaMenuTrigger.vue	Opens and closes the content of its mega menu item.
MegaMenuViewport	MegaMenuViewport.vue	Shows the content of the open mega menu item.

Anatomy

<MegaMenu>
  <MegaMenuList>
    <MegaMenuItem>
      <MegaMenuTrigger />
      <MegaMenuContent>
        <MegaMenuLink />
      </MegaMenuContent>
      <MegaMenuLink />
    </MegaMenuItem>
  </MegaMenuList>
  <MegaMenuViewport />
</MegaMenu>

Styling

Part	Recipe
MegaMenu	mega-menu
MegaMenuContent	mega-menu-content
MegaMenuItem	mega-menu-item
MegaMenuLink	focus-ring
MegaMenuList	mega-menu-list
MegaMenuTrigger	mega-menu-trigger
MegaMenuViewport	mega-menu-viewport

Install

Writes 8 files into components/ui/mega-menu/. For agents, npx @frontic/ui docs mega-menu prints this reference as markdown; the MCP server serves the same.

npm packages: @lucide/vue; @vueuse/core; reka-ui

API reference

MegaMenu MegaMenu.vue

Groups all parts of the mega menu. Renders a <nav>.

Prop	Type	Default
modelValue	string	—

defaultValue	string	—

dir	Direction	—

orientation	Orientation	'horizontal'

delayDuration	number	200

skipDelayDuration	number	300

disableClickTrigger	boolean	false

disableHoverTrigger	boolean	false

disablePointerLeaveClose	boolean	false

unmountOnHide	boolean	true

asChild	boolean	false

as	AsTag \| Component	'nav'
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default 'nav'
class	ClassValue	—

Event	Payload
update:modelValue	value: string

Slot	Slot props
default	{ modelValue: string; }

Recipe mega-menu	Sets
base: mega-menu	1 property

Parts

Anatomy

Styling

Install

API reference

MegaMenu MegaMenu.vue

MegaMenuContent MegaMenuContent.vue

MegaMenuItem MegaMenuItem.vue

MegaMenuLink MegaMenuLink.vue

MegaMenuList MegaMenuList.vue

MegaMenuTrigger MegaMenuTrigger.vue

MegaMenuViewport MegaMenuViewport.vue