Skip to content
Layout

TopNavMegaMenu

Full-width mega menu panel for TopNav.

React source Core source

TopNavMegaMenu

Full-width panel below the top bar for richer navigation. Pass items and optional featured (usually a TopNav.MegaMenu.FeaturedCard). Opens on hover/focus after a short delay; dismiss with Escape or an outside click. Also available as TopNav.MegaMenu.

Examples

Default

A mega menu trigger with a short item list and a featured card.
Demo.tsxtsx
import { TopNav } from '@var-ui/react';

<TopNav>
  <TopNav.MegaMenu
    label="Solutions"
    items={[{ id: 'startups', title: 'For startups', href: '/startups' }]}
    featured={<TopNav.MegaMenu.FeaturedCard title="Enterprise" description="Scale" />}
  />
</TopNav>

Use TopNav.MegaMenu.FeaturedCard for the right-hand promo slot — title, description, optional href, and an action control.

Demo.tsxtsx
import { Button, TopNav } from '@var-ui/react';

<TopNav>
  <TopNav.MegaMenu
    label="Solutions"
    isOpen
    items={[
      { id: 'startups', title: 'For startups', href: '/startups' },
      { id: 'enterprise', title: 'For enterprise', href: '/enterprise' },
    ]}
    featured={
      <TopNav.MegaMenu.FeaturedCard
        title="Platform tour"
        description="See how teams build with Acme in under five minutes."
        href="/tour"
        action={<Button intent="secondary" size="sm">Watch demo</Button>}
      />
    }
  />
</TopNav>

Props

Accessibility

The trigger exposes aria-expanded and aria-haspopup. Escape closes the panel and returns focus to the trigger. Prefer clear item titles and featured-card copy so the panel works without relying on imagery alone.