NavbarWithAnimatedMegaDropdown

1.0.0

Marketing header with animated desktop mega menus, a primary CTA, and a slide-in overlay for small screens.

npx jabkit add navbar-with-animated-mega-dropdown

Component Data

ID: navbar-with-animated-mega-dropdown
Category: marketing
Version: 1.0.0
Added: 2026-09-07
Type: block
Keyboard nav: Yes
Reduced motion: Yes

navbarmarketingnavigationheadermega-menudropdownmobilecta

Dependencies

lucide-react
clsx
tailwind-merge

Examples

Default

<div className="min-h-[28rem] bg-background text-foreground">
      <NavbarWithAnimatedMegaDropdown
        {...navbarWithAnimatedMegaDropdownMocks.default}
      />
    </div>

Variants

<div className="min-h-[22rem] bg-background text-foreground">
      <NavbarWithAnimatedMegaDropdown
        {...navbarWithAnimatedMegaDropdownMocks.alternate}
      />
    </div>