FullscreenMenu

Navigation

Fullscreen-Overlay-Menü mit übergroßer Typografie: nummerierte Links staggern zeilenweise herein (Line-Mask-Reveal), bei Hover gleitet ein Pfeil heran. Burger morpht zum X, Body-Scroll wird gesperrt.

Live Demo

Klick auf den Burger — das Overlay füllt den ganzen Bildschirm:

Schließen: X oben rechts oder Escape

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`items`	`FullscreenMenuItem[]`	Ja	—	Menüpunkte {href, label}
`footer`	`ReactNode`	Nein	—	Inhalt unten im Overlay (Kontakt, Social Links)
`accentColor`	`string`	Nein	`'#ff5c39'`	Akzentfarbe (Hover, Nummern)
`background`	`string`	Nein	—	Hintergrund des Overlays (Gradient)
`fixedTrigger`	`boolean`	Nein	`false`	Burger fixiert oben rechts
`triggerColor`	`string`	Nein	`'#1a202c'`	Farbe des Burgers (geschlossen)
`renderLink`	`(item, props) => ReactNode`	Nein	—	Custom Link-Renderer
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse für den Trigger

Code-Beispiel

<FullscreenMenu
  items={[
    { href: '/', label: 'Startseite' },
    { href: '/projekte', label: 'Projekte' },
    { href: '/studio', label: 'Studio' },
    { href: '/kontakt', label: 'Kontakt' },
  ]}
  accentColor="#ff5c39"
  footer={<p>[email protected] — Dahn, Pfalz</p>}
/>