PriorityNav

Navigation

Responsive Navigation mit dynamischem Overflow-Burger-Menü. Misst automatisch die Breite der Nav-Items und verschiebt überzählige Einträge in ein ausklappbares Burger-Menü.

Live Demo

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`items`	`NavItem[]`	Ja	—	Array mit {href, label} für die Menüpunkte
`logo`	`NavLogo`	Nein	—	Logo-Konfiguration: {src, alt, href?, height?}
`backgroundColor`	`string`	Nein	`'#0096C7'`	Hintergrundfarbe der Navbar
`burgerMenuColor`	`string`	Nein	`'#006E9A'`	Hintergrundfarbe des Burger-Dropdowns
`fontFamily`	`string`	Nein	`'inherit'`	Schriftfamilie für Nav-Items
`rightContent`	`ReactNode`	Nein	—	Inhalt rechts neben den Menüpunkten (z.B. Sprachschalter, CTA)
`burgerExtra`	`ReactNode`	Nein	—	Zusätzlicher Inhalt im Burger-Dropdown (z.B. Telefon-Button)
`renderLink`	`(item, props) => ReactNode`	Nein	—	Custom Link-Renderer (z.B. für Next.js Link oder next-intl)
`className`	`string`	Nein	—	Zusätzliche CSS-Klassen

Code-Beispiel

<PriorityNav
  logo={{ src: '/images/logo.png', alt: 'Mein Logo', href: '/' }}
  items={[
    { href: '/', label: 'Startseite' },
    { href: '/angebot', label: 'Angebot' },
    { href: '/galerie', label: 'Galerie' },
    { href: '/team', label: 'Team' },
    { href: '/kontakt', label: 'Kontakt' },
  ]}
  backgroundColor="#1a1a2e"
  burgerMenuColor="#16213e"
  rightContent={<a href="tel:+49123456" style={{ color: 'white' }}>Anrufen</a>}
/>