Navigation

Mobile-first Hauptnavigation mit Hamburger-Menu, Focus-Trap und Desktop-Dropdown. Das Hamburger-Menu ist ab Tablet aufwärts ausgeblendet; auf Desktop werden Dropdown-Untermenus über die Popover API mit Anchor Positioning geöffnet – per Hover (150ms Delay) und Tastatur (ArrowDown, Escape). position-try-fallbacks verhindert, dass Dropdowns aus dem Viewport laufen.

Einfache Navigation

Vier bis fünf Links ohne Unterseiten – passend für kleinere Auftritte wie Microsite oder Landingpage. Der aktive Link ist visuell hervorgehoben und hat aria-current="page".

Hauptnavigation ohne Dropdown

Zur besseren Darstellung ist die Navigation in einen Rahmen eingebettet.

<Navigation
  items={[
    { label: 'Startseite', href: '/', active: true },
    { label: 'Förderung', href: '/foerderung' },
    { label: 'Service', href: '/service' },
    { label: 'Über uns', href: '/über-uns' },
    { label: 'Kontakt', href: '/kontakt' },
  ]}
/>

Mit Dropdown-Untermenu

Navigationspunkte mit children erhalten auf Desktop ein Popover-Dropdown mit Anchor Positioning. Hover öffnet mit 150ms Delay, Tastatur-Navigation mit ArrowDown/Up/Escape. Auf Mobilgeräten werden die Unterpunkte direkt im Hamburger-Menu angezeigt (kein Popover). ARIA Pattern: aria-haspopup, aria-expanded, role="menu"/role="menuitem".

Navigation mit Unterpunkten

Hover über 'Förderung & Klimaschutz' für das Dropdown (nur Desktop).

Auf Desktop: Hover über "Förderung & Klimaschutz" öffnet das Dropdown. Auf Mobil: Hamburger-Icon antippen.

<Navigation
  items={[
    { label: 'Startseite', href: '/' },
    {
      label: 'Förderung & Klimaschutz',
      href: '/foerderung',
      children: [
        { label: 'Solar-Förderung', href: '/foerderung/solar' },
        { label: 'Wärmepumpe', href: '/foerderung/waermepumpe' },
        { label: 'E-Ladesäulen', href: '/foerderung/ladesaeulen' },
        { label: 'Alle Programme vergleichen', href: '/foerderung' },
      ],
    },
    { label: 'ÖPNV', href: '/oepnv' },
    { label: 'Kontakt', href: '/kontakt' },
  ]}
/>

Installation

cp-components add navigation