Photonix

MegaMenu

A large dropdown menu that shows multiple levels of navigation.

Preview

Usage
import { MegaMenu, Button } from '@photonix/ultimate';
import { useState } from 'react';

const [open, setOpen] = useState(false);

<Button onMouseEnter={() => setOpen(true)}>Products</Button>

<MegaMenu open={open} onClose={() => setOpen(false)}>
  <div className="grid">...</div>
</MegaMenu>

Component API

MegaMenu

Prop
Type
Default
Description
open
boolean
-
Whether the menu is open
onClose
() => void
-
Callback when menu requests to close (e.g. clicking overlay)
children
React.ReactNode
-
Content of the menu
topOffset
string
'72px'
Top offset matching navigation height. Default: 72px
logoSpacer
React.ReactNode
-
Optional Logo component used for alignment spacing

On this page

Preview
Component API
Photonix UI - React Components, Templates & Figma Design System