Velocity X Components

Core UI

Mega Menu Panel

Multi-column dropdown panel triggered from a nav item, with link columns plus an optional featured card, closing on outside click or Escape.

Subscription Included with the Velocity Components subscription.
bash
$ velocityx add mega-menu

Built for react. Needs react already installed as a peer dependency. An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.

Full docs for Mega Menu Panel →

Needs a licence key — subscribe here, then velocityx loginonce.

react v1.0.0 react

Props

NameTypeRequiredDefaultDescription
labelstringNo'Product'trigger label, e.g. "Product"
columns{ heading, items: { label, href, description? }[] }[]No[ { heading: 'Platform', items: [ { label: 'Overview', href: '#', description: 'What Velocity ships out of the box' }, { label: 'Components', href: '#', description: '175+ production-ready blocks' }, { label: 'Theming', href: '#', description: 'Token-driven brand swaps' }, ], }, { heading: 'Solutions', items: [ { label: 'Agencies', href: '#' }, { label: 'SaaS', href: '#' }, { label: 'E-commerce', href: '#' }, ], }, ]
featured{ title, description, href, cta }?No{ title: 'What’s new', description: 'See the latest components shipped this month.', href: '#', cta: 'View changelog' }

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text
components/velocity/mega-menu/MegaMenu.jsx

Using the Mega Menu Panel component

Install it with velocityx add mega-menu. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

More from Core UI.