MegaMenu

Navigation

Mega-Dropdown im Stripe-Stil: Das Panel klappt nicht neu auf, sondern gleitet beim Wechsel zwischen Menüpunkten weich zur neuen Position und morpht seine Größe. Inhalte mit Icons und Beschreibungen cross-faden.

Live Demo

Minicon

Projekt starten →

Web

WebdesignModerne, schnelle Websites Online-ShopsVerkaufen rund um die Uhr Hosting & PflegeSorglos-Paket inkl. SSL

Marketing

SEOBei Google gefunden werden Social MediaFacebook & Instagram

GastronomieSpeisekarten, Reservierung VereineMitglieder & Termine HandwerkReferenzen & Anfragen

Fahren Sie über „Leistungen“ und wechseln Sie dann zu „Branchen“ — das Panel gleitet und morpht zur neuen Position statt neu aufzuklappen.

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`items`	`MegaMenuItem[]`	Ja	—	Menüpunkte {label, href?} oder {label, columns[]}
`logo`	`ReactNode`	Nein	—	Logo links
`rightContent`	`ReactNode`	Nein	—	Inhalt rechts (z.B. CTA)
`accentColor`	`string`	Nein	`'#635bff'`	Akzentfarbe (Icons)
`color`	`string`	Nein	`'#1a202c'`	Textfarbe
`backgroundColor`	`string`	Nein	`'#ffffff'`	Hintergrund von Leiste und Panel
`panelWidth`	`number`	Nein	`520`	Panel-Breite in Pixeln
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<MegaMenu
  logo={<strong>Minicon</strong>}
  items={[
    {
      label: 'Leistungen',
      columns: [{
        title: 'Web',
        links: [
          { href: '/webdesign', label: 'Webdesign', description: 'Moderne Websites', icon: '🎨' },
          { href: '/hosting', label: 'Hosting', description: 'Schnell & sicher', icon: '🚀' },
        ],
      }],
    },
    { label: 'Preise', href: '/preise' },
    { label: 'Kontakt', href: '/kontakt' },
  ]}
/>