SectionedNav

Navigation

Sticky Header-Navigation mit gruppierten Sektionen (Desktop-Dropdown / Mobile-Drawer mit Kontakt-Block). Ideal für Vereine und Sites mit mehreren Inhaltsgruppen.

Live Demo

Beispiel-Inhalt unter der Navigation. Auf Desktop klappt das Dropdown „Verein“ aus, auf Mobile öffnet das Burger-Menü die gruppierten Sektionen mit Kontakt-Block.

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`items`	`SectionedNavLink[]`	Ja	—	Hauptlinks (immer sichtbar auf Desktop)
`logo`	`SectionedNavLogo`	Nein	—	Logo {src, alt, href?, height?, brandText?, brandSuffix?}
`sections`	`SectionedNavSection[]`	Nein	—	Gruppierte Sektionen mit {label, links[], asDropdown?}
`contact`	`SectionedNavContact[]`	Nein	—	Kontakt-Einträge im Mobile-Drawer {type, href, label}
`cta`	`{href, icon, ariaLabel}`	Nein	—	CTA-Icon-Button rechts in der Top-Bar
`primaryColor`	`string`	Nein	`'#1E56A0'`	Hauptfarbe (Header-Hintergrund)
`primaryColorDark`	`string`	Nein	`'#163F75'`	Dunklere Variante (Mobile-Drawer)
`accentColor`	`string`	Nein	`'#E67E22'`	Akzentfarbe für CTA
`accentColorDark`	`string`	Nein	`'#C46618'`	Hover-Variante der Akzentfarbe
`fontFamily`	`string`	Nein	`'inherit'`	Schriftfamilie für Nav-Items
`position`	`'fixed' \| 'sticky'`	Nein	`'fixed'`	Positionierung der Navigation
`renderLink`	`(link, props) => ReactNode`	Nein	—	Custom Link-Renderer
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<SectionedNav
  logo={{ src: '/images/logo.png', alt: 'TV Dahn', brandText: 'TV DAHN', brandSuffix: 'e.V.' }}
  items={[
    { href: '#aktuelles', label: 'Aktuelles' },
    { href: '#abteilungen', label: 'Abteilungen' },
    { href: '#vorstand', label: 'Vorstand' },
    { href: '#kontakt', label: 'Kontakt' },
  ]}
  sections={[
    {
      label: 'Verein',
      asDropdown: true,
      links: [
        { href: '/satzung', label: 'Satzung' },
        { href: '/beitragswesen', label: 'Beitragswesen' },
        { href: '/downloads', label: 'Downloads' },
      ],
    },
  ]}
  contact={[
    { type: 'mail', href: 'mailto:[email protected]', label: '[email protected]' },
    { type: 'phone', href: 'tel:063915149', label: '06391 / 5149' },
  ]}
  primaryColor="#1E56A0"
  primaryColorDark="#163F75"
/>