SharePoint MegaMenu

Zentrale, barrierearme Portalnavigation aus SharePoint Managed Metadata für SharePoint Server Subscription Edition und SharePoint Server 2019.

Eigenschaft	Wert
Version	2.1.0
SharePoint Framework	1.4.1
Node.js für den Build	8.17.0
Moderne Seiten	SPFx Application Customizer
Klassische Seiten	separate ScriptLink-Variante
Paket	sharepoint/solution/mega-menu.sppkg

Funktionen

• zentrale Konfiguration pro Site Collection
• Termset-Auswahl bevorzugt per GUID, alternativ per Name
• drei Navigationsebenen
• zwei Darstellungsmodi: SharePoint-ähnliches Mega Menu und strukturelles Flyout
• benutzerdefinierte Sortierung aus dem Term Store
• Unterstützung für _Sys_Nav_SimpleLinkUrl, _Sys_Nav_TargetUrl und _Sys_Nav_HoverText
• Auflösung von ~sitecollection
• Markierung des aktuellen Navigationspfads
• Tastatur-, Fokus-, Maus- und Touch-Bedienung
• responsive Darstellung und Unterstützung reduzierter Bewegung
• Session-Cache mit konfigurierbarer Laufzeit
• Debug-Protokollierung ohne Ausgabe im Normalbetrieb
• Unterstützung moderner und klassischer SharePoint-Seiten

Architektur

App Catalog
└── zentral bereitgestelltes MegaMenu-SPFx-Bundle

Site Collection
└── SPSite.UserCustomAction
    ├── ComponentId
    └── ClientSideComponentProperties
        ├── termSetId / termSetName
        ├── cacheMinutes
        ├── menuMode
        └── debug

Moderne Seite                     Klassische Seite
└── Application Customizer        └── ScriptLink + Classic-Runtime

Die Site-Collection-Action ist die einzige Konfigurationsquelle. Es gibt keine versteckte Konfigurationsliste, keine MegaMenu-Konfiguration im Property Bag und keine Web-scoped Kopien. PortalSettings kann diese Action zentral lesen und aktualisieren.

Das SPFx-Paket verwendet skipFeatureDeployment: true. Es wird im App Catalog zentral bereitgestellt und nicht in Root Web oder Unterwebs über „App hinzufügen“ installiert.

Konfiguration

{
  "termSetId": "7948e6f9-7af4-431e-b6fe-328122f2746c",
  "termSetName": "Global Navigation",
  "cacheMinutes": 15,
  "menuMode": "megaMenu",
  "debug": false
}

Property	Typ	Standard	Beschreibung
termSetId	String	leer	GUID des Termsets; hat Vorrang vor dem Namen
termSetName	String	leer	Fallback für bestehende Konfigurationen
cacheMinutes	Number	15	Cachezeit von 1 bis 1440 Minuten
menuMode	String	megaMenu	megaMenu oder flyout
debug	Boolean	false	ausführliche Browser-Konsolenausgaben

Mega Menu

"menuMode": "megaMenu" zeigt die zweite Ebene als breites, spaltenbasiertes Panel. Die dritte Ebene wird als Linkliste unter der jeweiligen Kategorie dargestellt.

Flyout

"menuMode": "flyout" zeigt die zweite Ebene als kompaktes Dropdown. Die dritte Ebene öffnet sich seitlich als strukturelles Flyout.

Build

npm install
npm run package

npm run package erstellt automatisch beide Ausgaben:

• das SPFx-Paket für moderne Seiten
• das Classic-Paket unter classic/dist/

Nur die Classic-Dateien neu erzeugen:

npm run build:classic

Erwartete Umgebung:

Node.js 8.17.0
npm 6.x
lokales Gulp 3.9.1

Das Ergebnis liegt unter:

sharepoint/solution/mega-menu.sppkg

Moderne Bereitstellung

1. mega-menu.sppkg in den Farm App Catalog hochladen beziehungsweise ersetzen.
2. Die Lösung zentral für alle Sites verfügbar machen.
3. MegaMenu nicht über „App hinzufügen“ in Inhaltswebsites installieren.
4. Pro gewünschter Site Collection eine Site-Collection-Action anlegen.

Beispiel für das Mega Menu:

.\deployment\add-megamenu.ps1 `
  -SiteUrl 'http://clshp001/sites/target' `
  -TermSetId '7948e6f9-7af4-431e-b6fe-328122f2746c' `
  -TermSetName 'Global Navigation' `
  -CacheMinutes 15 `
  -MenuMode megaMenu

Beispiel für das Flyout:

.\deployment\add-megamenu.ps1 `
  -SiteUrl 'http://clshp001/sites/target' `
  -TermSetId '7948e6f9-7af4-431e-b6fe-328122f2746c' `
  -MenuMode flyout `
  -EnableDebug

Das Skript entfernt alte Web- und Site-Registrierungen, bereinigt die frühere Property-Bag-Konfiguration und erstellt genau eine neue Site-Collection-Action.

Classic Pages

Die Classic-Variante bleibt erhalten, weil ein SPFx Application Customizer nur in der modernen Oberfläche ausgeführt wird.

Das Classic-Paket wird bei npm run build und npm run package automatisch erzeugt. Es kann bei Bedarf auch separat gebaut werden:

npm run build:classic

Ausgabe:

classic/dist/
├── megamenu-classic.css
├── megamenu-services-standalone.js
├── megamenu-classic.js
└── classic-deployment.md

Die Classic-Runtime liest dieselben ClientSideComponentProperties der zentralen Site-Collection-Action und unterstützt ebenfalls beide Menümodi. Die Installationsdetails stehen in classic/classic-deployment.md.

Styling

Das moderne Styling liegt in:

src/extensions/megaMenu/MegaMenu.module.scss

SPFx kompiliert diese Datei in das Bundle-CSS. Die eigenständige Classic-CSS liegt unter:

classic/megamenu-classic.css

Beide Varianten orientieren sich an SharePoint mit Segoe UI, neutralen Flächen, Theme-Farbe für den aktiven Pfad, kompakten Abständen und Fabric-kompatiblen Fokusmarkierungen.

Die wichtigsten CSS-Variablen können durch Custom Branding überschrieben werden:

:root {
  --megaMenuBarHeight: 44px;
  --megaMenuContentWidth: 1200px;
  --megaMenuFlyoutWidth: 288px;
  --megaMenuZIndex: 6000;
}

Das MegaMenu lädt bewusst keine externe cssUrl-Property. Kundenspezifische Gestaltung gehört in die Solution Custom Branding.

Diagnose

Mit "debug": true schreibt die moderne Extension Meldungen mit diesen Quellen:

[MegaMenuApplicationCustomizer]
[TaxonomyNavigationService]
[SPTermStorePickerService]
[MegaMenuRenderer]

Geladenes Bundle prüfen:

performance.getEntriesByType('resource')
  .map(function (entry) { return entry.name; })
  .filter(function (url) { return url.toLowerCase().indexOf('mega-menu') >= 0; });

Aktiven Modus prüfen:

document.getElementById('Mega-Menu').getAttribute('data-menu-mode');

Projektstruktur

MegaMenu/
├── classic/                         Classic-Runtime und CSS
├── config/                          SPFx-Buildkonfiguration
├── deployment/add-megamenu.ps1      zentrale Site-Registrierung
├── src/extensions/megaMenu/         Application Customizer, Renderer und SCSS
├── src/services/                    Taxonomy- und Navigationsdienste
├── build-classic.ps1
├── gulpfile.js
└── package.json

Versionshistorie

2.1.0

• SharePoint-ähnliches, helles Navigationsdesign.
• Neue Property menuMode mit megaMenu und flyout.
• Eigenständiges Flyout-Rendering für zweite und dritte Ebene.
• Classic-Runtime und Classic-CSS auf beide Modi aktualisiert.
• Konfiguration auf eine Site-Collection-Action konsolidiert.
• Veraltete elements.xml, Azure-CDN-Konfiguration, Mock- und UserCustomAction-Service-Dateien entfernt.
• Bereitstellungs- und Classic-Buildskripte vereinfacht.

2.0.1

• Zentrale SPFx-Bereitstellung mit skipFeatureDeployment: true.
• Keine App-Installation in einzelnen Inhaltswebsites erforderlich.

2.0.0

• Neue Application-Customizer-ID c0abbffb-355d-4d4e-bd38-9e15fb811506.
• Alte On-Premises-Manifest- und Loader-Zuordnungen umgangen.