Initial commit

2026-04-13 10:26:01 +02:00
commit bc1258ae76
116 changed files with 30409 additions and 0 deletions
--- a/.yo-rc.json
+++ b/.yo-rc.json
@@ -0,0 +1,12 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "isCreatingSolution": true,
+    "environment": "onprem19",
+    "version": "1.10.0",
+    "libraryName": "mega-menu",
+    "libraryId": "f4660e06-ce08-43ee-bfb7-5c4464e01133",
+    "packageManager": "npm",
+    "componentType": "extension",
+    "extensionType": "ApplicationCustomizer"
+  }
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,199 @@
+# SharePoint MegaMenu Extension
+
+**Version:** 1.0.2  
+**Framework:** SharePoint Framework (SPFx) 1.4.1  
+**Node.js:** v8.17.0  
+
+Eine moderne, barrierefreie Mega-Menü-Lösung für SharePoint 2019 oder SharePoint SE als ApplicationCustomizer Extension.
+
+## 🌟 Features
+
+- **3-stufige Navigationshierarchie** basierend auf SharePoint Managed Metadata (Taxonomy)
+- **Responsive Design** mit automatischer Anpassung an verschiedene Bildschirmgrößen
+- **Barrierefreiheit** mit vollständiger Tastaturnavigation und Screenreader-Unterstützung
+- **Einstellungs-Panel** für Administratoren zur Konfiguration
+- **Externe CSS-Unterstützung** für individuelle Anpassungen
+- **Office UI Fabric Integration** für konsistente SharePoint-Optik
+
+## 📋 Voraussetzungen
+
+- SharePoint 2019 oder SharePoint SE (Subscription Edition)
+- Node.js v8.17.0 (empfohlen)
+- SharePoint Framework Development Tools (SPFx 1.4.1)
+
+## 🚀 Installation & Entwicklung
+
+### 1. Repository klonen und Abhängigkeiten installieren
+
+```bash
+git clone <repository-url>
+cd MegaMenu
+npm install
+```
+
+### 2. Entwicklungsserver starten
+
+```bash
+gulp serve
+```
+
+### 3. Produktionspaket erstellen
+
+```bash
+gulp clean
+gulp bundle --ship
+gulp package-solution --ship
+```
+
+## 📁 Projektstruktur
+
+```
+src/
+├── extensions/
+│   └── megaMenu/
+│       ├── MegaMenuApplicationCustomizer.ts    # Haupteinstiegspunkt
+│       ├── MegaMenuRenderer.ts                 # Menü-Rendering-Logik
+│       ├── MegaMenuSettings.ts                 # Einstellungs-Panel
+│       └── MegaMenu.css                        # Styling
+├── services/
+│   ├── TaxonomyNavigationService.ts           # Taxonomy-Datenabfrage
+│   ├── UserCustomActionService/               # UserCustomAction-Verwaltung
+│   └── ...
+└── deployment/
+    ├── add-megamenu.ps1                       # Installations-Script
+    └── remove-megamenu.ps1                    # Deinstallations-Script
+```
+
+## ⚙️ Konfiguration
+
+### Einstellungs-Panel (Admin-Bereich)
+
+Das MegaMenu verfügt über ein Einstellungs-Panel, das über das Zahnrad-Icon (⚙️) im Menü zugänglich ist:
+
+1. **Name des Navigations-Termsets**: Der Name des Managed Metadata Termsets, das als Datenquelle dient
+2. **Pfad zu zusätzlicher CSS-Datei**: Optional - URL zu einer benutzerdefinierten CSS-Datei
+
+### PowerShell-Deployment
+
+```powershell
+# Installation
+.\src\deployment\add-megamenu.ps1
+
+# Deinstallation  
+.\src\deployment\remove-megamenu.ps1
+```
+
+## 🎨 Anpassungen
+
+### CSS-Customization
+
+Das MegaMenu kann über externe CSS-Dateien angepasst werden. Wichtige CSS-Klassen:
+
+```css
+/* Haupt-Container */
+#Mega-Menu { }
+
+/* Top-Level Menüpunkte */
+#Mega-Menu > ul > li > a { }
+
+/* Mega-Menü Dropdown */
+.mega-menu { }
+
+/* Kategorien im Dropdown */
+.mega-menu-category { }
+
+/* Links in Kategorien */
+.mega-menu-category ul li a { }
+
+/* Einstellungs-Panel */
+.mm-settings-panel { }
+```
+
+### Accessibility Features
+
+- **Skip-Links** für Screenreader
+- **ARIA-Rollen** und Labels
+- **Fokus-Management** mit sichtbaren Fokus-Indikatoren
+- **Tastaturnavigation** mit Tab/Shift+Tab/Escape
+- **High Contrast Modus** Unterstützung
+
+## 🔧 Build-Befehle
+
+| Befehl | Beschreibung |
+|--------|-------------|
+| `gulp serve` | Entwicklungsserver mit Live-Reload |
+| `gulp build` | Entwicklungs-Build (Debug-Modus) |
+| `gulp bundle --ship` | Produktions-Build (Optimiert) |
+| `gulp package-solution --ship` | SharePoint Package (.sppkg) erstellen |
+| `gulp clean` | Build-Artifacts löschen |
+| `gulp test` | Unit-Tests ausführen |
+
+## 📦 Deployment
+
+1. **Paket erstellen:**
+   ```bash
+   gulp clean && gulp bundle --ship && gulp package-solution --ship
+   ```
+
+2. **SharePoint App Catalog:**
+   - `.sppkg` Datei aus `sharepoint/solution/` hochladen
+   - App genehmigen und für alle Sites verfügbar machen
+
+3. **Site-spezifische Aktivierung:**
+   - PowerShell-Scripts verwenden
+
+## 🐛 Troubleshooting
+
+### Häufige Probleme
+
+**Problem:** Menü wird nicht angezeigt  
+**Lösung:** Termset-Name in den Einstellungen prüfen
+
+**Problem:** CSS-Styling funktioniert nicht  
+**Lösung:** Externe CSS-URL und CORS-Einstellungen überprüfen
+
+**Problem:** Build-Fehler  
+**Lösung:** Node.js Version prüfen (v8.17.0 empfohlen)
+
+### Debug-Modus
+
+```bash
+# Detaillierte Build-Ausgabe
+gulp bundle --verbose
+
+# TypeScript-Fehler anzeigen  
+gulp build
+```
+
+## 🔄 Versionshistorie
+
+### v1.0.2 (Aktuell)
+- Einstellungs-Panel implementiert
+- Fokus-Management verbessert
+- CSS-Optimierungen für SharePoint-Konsistenz
+- Barrierefreiheit-Verbesserungen
+
+### v1.0.1
+- Responsive Design hinzugefügt
+- Performance-Optimierungen
+
+### v1.0.0
+- Initiale Release
+- 3-stufige Navigation
+- Grundlegende Accessibility
+
+## 👥 Mitwirkende
+
+- Entwicklung: Matthias Glubrecht
+- Framework: SharePoint Framework (Microsoft)
+- UI: Office UI Fabric (Microsoft)
+
+## 📄 Lizenz
+
+tbd
+
+## 🆘 Support
+
+Bei Fragen oder Problemen:
+1. Issues im Repository erstellen
+2. Dokumentation und Troubleshooting-Bereich prüfen
--- a/build-classic.ps1
+++ b/build-classic.ps1
@@ -0,0 +1,272 @@
+# Build script for classic SharePoint version
+# Creates a standalone distribution with proper service extraction
+
+Write-Host "Building MegaMenu Classic Distribution..." -ForegroundColor Green
+
+# Ensure output directory exists
+$outputPath = ".\classic"
+if (-not (Test-Path $outputPath)) {
+    New-Item -ItemType Directory -Path $outputPath -Force
+}
+
+# Step 1: Build the modern SPFx version to ensure CSS is up to date
+Write-Host "Building SPFx version for CSS..." -ForegroundColor Yellow
+try {
+    gulp bundle --ship
+    Write-Host "✓ SPFx build completed" -ForegroundColor Green
+} catch {
+    Write-Host "⚠ SPFx build failed, using existing CSS" -ForegroundColor Yellow
+}
+
+# Step 2: Copy CSS from the built version (same CSS for both classic and modern)
+Write-Host "Copying CSS files..." -ForegroundColor Yellow
+$cssSource = ".\lib\extensions\megaMenu\MegaMenu.css"
+$cssTarget = ".\classic\MegaMenu.css"
+
+if (Test-Path $cssSource) {
+    Copy-Item $cssSource $cssTarget -Force
+    Write-Host "✓ CSS copied from SPFx build" -ForegroundColor Green
+} else {
+    Write-Host "⚠ Built CSS not found, keeping existing classic CSS" -ForegroundColor Yellow
+}
+
+# Step 3: Verify standalone services exist
+$servicesFile = ".\classic\megamenu-services-standalone.js"
+if (Test-Path $servicesFile) {
+    Write-Host "✓ Standalone services found" -ForegroundColor Green
+} else {
+    Write-Host "✗ Missing megamenu-services-standalone.js" -ForegroundColor Red
+    Write-Host "  Please ensure this file exists in the classic folder" -ForegroundColor Yellow
+}
+
+# Step 4: Verify classic wrapper exists
+$wrapperFile = ".\classic\megamenu-classic.js" 
+if (Test-Path $wrapperFile) {
+    Write-Host "✓ Classic wrapper found" -ForegroundColor Green
+} else {
+    Write-Host "✗ Missing megamenu-classic.js" -ForegroundColor Red
+}
+
+# Step 5: Create complete deployment package info
+Write-Host "Creating deployment documentation..." -ForegroundColor Yellow
+
+$deploymentContent = @"
+# SharePoint MegaMenu Classic Deployment Guide
+Version 1.0.2 - Classic SharePoint Support
+
+## Architecture Overview
+
+This classic version reuses the exact same service logic as the modern SPFx version:
+- **Same CSS** (MegaMenu.css from SPFx build)
+- **Same Services** (TaxonomyNavigationService, MegaMenuRenderer extracted to standalone)
+- **Same Configuration** (Reads UserCustomAction properties like SPFx version)
+- **Same Menu Structure** (Identical 3-level navigation rendering)
+
+## Required Files
+
+### Core Files (Required)
+1. **MegaMenu.css** - Main stylesheet (shared with SPFx version)
+2. **megamenu-services-standalone.js** - Extracted services without SPFx dependencies
+3. **megamenu-classic.js** - Classic SharePoint integration wrapper
+
+### Dependencies (SharePoint Built-in)
+- SP.js (SharePoint JSOM)
+- SP.Taxonomy.js (Taxonomy/Metadata services)
+- jQuery (usually available in SharePoint)
+
+## Deployment Methods
+
+### Method 1: Site Assets (Recommended)
+````html
+<!-- Add to master page before closing </head> tag -->
+<link rel="stylesheet" href="/SiteAssets/megamenu/MegaMenu.css" />
+<script src="/SiteAssets/megamenu/megamenu-services-standalone.js"></script>
+<script src="/SiteAssets/megamenu/megamenu-classic.js"></script>
+````
+
+### Method 2: Style Library  
+````html
+<link rel="stylesheet" href="/Style Library/megamenu/MegaMenu.css" />
+<script src="/Style Library/megamenu/megamenu-services-standalone.js"></script>
+<script src="/Style Library/megamenu/megamenu-classic.js"></script>
+````
+
+### Method 3: CDN or Document Library
+Upload to any accessible location and reference accordingly.
+
+## Configuration
+
+### Automatic Configuration Reading
+The classic version automatically reads the same UserCustomAction configuration as the SPFx version:
+- Term Set Name (default: "Navigation")  
+- External CSS URL (optional)
+
+### Setting Configuration
+Use one of these methods:
+
+**Option A: Via Modern SPFx Version**
+1. Install modern SPFx version on any modern SharePoint site
+2. Use the settings panel to configure termset and CSS URL
+3. Configuration is stored site-wide and will be read by classic version
+
+**Option B: Via PowerShell (Advanced)**
+````powershell
+# Connect to SharePoint site
+Add-PnPCustomAction -Name "MegaMenuConfig" -Location "ClientSideExtension.ApplicationCustomizer" `
+  -ClientSideComponentId "abc3361f-bb2d-491f-aba3-cd51c19a299b" `
+  -ClientSideComponentProperties '{"termSetName":"Your Navigation Termset","cssUrl":"/SiteAssets/custom-menu.css"}'
+````
+
+## Testing & Validation
+
+### 1. Verify Dependencies
+Open browser console and check:
+````javascript
+// These should all return objects/functions:
+typeof SP
+typeof SP.Taxonomy  
+typeof window.MegaMenuServices
+typeof window.MegaMenuClassic
+````
+
+### 2. Enable Debug Mode
+````javascript
+window.MegaMenuConfig = { debug: true };
+````
+Then reload page to see console logging.
+
+### 3. Manual Initialization
+If auto-loading fails:
+````javascript
+window.MegaMenuClassic.reload();
+````
+
+## Troubleshooting
+
+### Common Issues
+1. **"SP is undefined"** - SP.js not loaded yet, classic wrapper will retry
+2. **"MegaMenuServices not found"** - Include megamenu-services-standalone.js first
+3. **"No menu items found"** - Check term set name and user permissions
+4. **Menu renders but no styling** - Verify CSS path and inclusion
+
+### Debug Steps
+1. Check browser network tab for 404s on CSS/JS files
+2. Verify SharePoint libraries load: SP.js, SP.Taxonomy.js
+3. Check term store permissions and term set existence  
+4. Enable debug mode for detailed console logging
+
+### Permissions Required
+- Read access to term store
+- Read access to site UserCustomActions (for configuration)
+- Basic site user permissions
+
+## Differences from SPFx Version
+
+| Feature | SPFx Version | Classic Version |
+|---------|-------------|----------------|
+| Deployment | App Catalog | Master Page/Web Part |
+| Configuration | Settings Panel | PowerShell or via SPFx |
+| Auto-loading | Yes | Manual inclusion |
+| Modern Sites | Yes | No |
+| Classic Sites | No | Yes |
+| SharePoint Online | Yes | Yes |
+| SharePoint On-Premises | 2019+ | 2013+ |
+
+## File Structure After Deployment
+````
+/SiteAssets/megamenu/
+├── MegaMenu.css                     (from SPFx build)
+├── megamenu-services-standalone.js  (extracted services)
+└── megamenu-classic.js              (classic wrapper)
+````
+
+"@
+
+Set-Content -Path ".\classic\deployment-guide.md" -Value $deploymentContent -Encoding UTF8
+
+# Step 6: Create a simple deployment script template
+$deployScript = @"
+# PowerShell script to deploy MegaMenu Classic to SharePoint
+# Requires PnP PowerShell module: Install-Module PnP.PowerShell
+
+param(
+    [Parameter(Mandatory=`$true)]
+    [string]`$SiteUrl,
+    
+    [string]`$LibraryName = "Site Assets",
+    [string]`$FolderName = "megamenu"
+)
+
+Write-Host "Deploying MegaMenu Classic to `$SiteUrl" -ForegroundColor Green
+
+# Connect to SharePoint
+Connect-PnPOnline -Url `$SiteUrl -Interactive
+
+# Create folder if it doesn't exist
+try {
+    Get-PnPFolder -Url "`$LibraryName/`$FolderName" -ErrorAction Stop
+    Write-Host "✓ Folder exists: `$LibraryName/`$FolderName" -ForegroundColor Green
+} catch {
+    Add-PnPFolder -Name `$FolderName -Folder `$LibraryName
+    Write-Host "✓ Created folder: `$LibraryName/`$FolderName" -ForegroundColor Green
+}
+
+# Upload files
+`$files = @(
+    @{Source=".\MegaMenu.css"; Target="`$LibraryName/`$FolderName/MegaMenu.css"},
+    @{Source=".\megamenu-services-standalone.js"; Target="`$LibraryName/`$FolderName/megamenu-services-standalone.js"},
+    @{Source=".\megamenu-classic.js"; Target="`$LibraryName/`$FolderName/megamenu-classic.js"}
+)
+
+foreach (`$file in `$files) {
+    if (Test-Path `$file.Source) {
+        Add-PnPFile -Path `$file.Source -Folder "`$LibraryName/`$FolderName"
+        Write-Host "✓ Uploaded: `$(`$file.Source)" -ForegroundColor Green
+    } else {
+        Write-Host "✗ File not found: `$(`$file.Source)" -ForegroundColor Red
+    }
+}
+
+Write-Host "`nDeployment completed!" -ForegroundColor Green
+Write-Host "Add these lines to your master page:" -ForegroundColor Yellow
+Write-Host "<link rel=`"stylesheet`" href=`"/`$LibraryName/`$FolderName/MegaMenu.css`" />" -ForegroundColor Gray
+Write-Host "<script src=`"/`$LibraryName/`$FolderName/megamenu-services-standalone.js`"></script>" -ForegroundColor Gray
+Write-Host "<script src=`"/`$LibraryName/`$FolderName/megamenu-classic.js`"></script>" -ForegroundColor Gray
+"@
+
+Set-Content -Path ".\classic\deploy-to-sharepoint.ps1" -Value $deployScript -Encoding UTF8
+
+# Step 7: Summary
+Write-Host "`n" + "="*60 -ForegroundColor Cyan
+Write-Host "MegaMenu Classic Build Completed!" -ForegroundColor Green
+Write-Host "="*60 -ForegroundColor Cyan
+
+Write-Host "`nDistribution files created:" -ForegroundColor Yellow
+$files = @(
+    @{Name="MegaMenu.css"; Desc="Shared stylesheet from SPFx"},
+    @{Name="megamenu-services-standalone.js"; Desc="Extracted services (no SPFx deps)"},
+    @{Name="megamenu-classic.js"; Desc="Classic SharePoint wrapper"},
+    @{Name="deployment-guide.md"; Desc="Complete deployment documentation"},
+    @{Name="deploy-to-sharepoint.ps1"; Desc="PowerShell deployment script"}
+)
+
+foreach ($file in $files) {
+    $exists = Test-Path ".\classic\$($file.Name)"
+    $status = if ($exists) { "✓" } else { "✗" }
+    $color = if ($exists) { "Green" } else { "Red" }
+    Write-Host "  $status $($file.Name)" -ForegroundColor $color -NoNewline
+    Write-Host " - $($file.Desc)" -ForegroundColor Gray
+}
+
+Write-Host "`nNext steps:" -ForegroundColor Yellow
+Write-Host "1. Review deployment-guide.md for instructions" -ForegroundColor White
+Write-Host "2. Use deploy-to-sharepoint.ps1 for automated deployment" -ForegroundColor White  
+Write-Host "3. Configure termset via modern SPFx version or PowerShell" -ForegroundColor White
+Write-Host "4. Test on classic SharePoint pages" -ForegroundColor White
+
+Write-Host "`nArchitectural Achievement:" -ForegroundColor Cyan
+Write-Host "✓ Same CSS as SPFx version" -ForegroundColor Green
+Write-Host "✓ Same service logic (extracted to standalone)" -ForegroundColor Green
+Write-Host "✓ Same configuration system" -ForegroundColor Green
+Write-Host "✓ Same menu rendering output" -ForegroundColor Green
+Write-Host "✓ No SPFx dependencies in classic version" -ForegroundColor Green
--- a/classic/classic-deployment.md
+++ b/classic/classic-deployment.md
@@ -0,0 +1,216 @@
+# MegaMenu für klassische SharePoint-Seiten
+
+Diese Dateien ermöglichen die Verwendung des MegaMenus auf klassischen SharePoint-Seiten (2019/SE) ohne SPFx Framework.
+
+## 📁 Dateien
+
+- `megamenu-classic.js` - Hauptlogik für klassische Seiten
+- `megamenu-classic.css` - Styling für klassische Seiten
+- `classic-deployment.md` - Diese Dokumentation
+
+## 🚀 Installation
+
+### Option 1: Master Page (empfohlen)
+
+1. **Dateien hochladen:**
+   ```
+   /SiteAssets/megamenu/megamenu-classic.js
+   /SiteAssets/megamenu/megamenu-classic.css
+   ```
+
+2. **Master Page bearbeiten:**
+   ```html
+   <!-- In den <head> Bereich -->
+   <link rel="stylesheet" type="text/css" href="/SiteAssets/megamenu/megamenu-classic.css" />
+   
+   <!-- Vor dem schließenden </body> Tag -->
+   <script type="text/javascript" src="/SiteAssets/megamenu/megamenu-classic.js"></script>
+   ```
+
+### Option 2: ScriptLink über PowerShell
+
+```powershell
+# CSS hinzufügen
+$web = Get-SPWeb "http://your-site-url"
+$web.AlternateCSSUrl = "/SiteAssets/megamenu/megamenu-classic.css"
+$web.Update()
+
+# JavaScript als Custom Action hinzufügen
+$customAction = $web.UserCustomActions.Add()
+$customAction.Location = "ScriptLink"
+$customAction.ScriptSrc = "/SiteAssets/megamenu/megamenu-classic.js"
+$customAction.Sequence = 1000
+$customAction.Update()
+$web.Update()
+```
+
+### Option 3: Content Editor Web Part
+
+```html
+<link rel="stylesheet" type="text/css" href="/SiteAssets/megamenu/megamenu-classic.css" />
+<script type="text/javascript" src="/SiteAssets/megamenu/megamenu-classic.js"></script>
+```
+
+## ⚙️ Konfiguration
+
+### Basis-Konfiguration
+
+```html
+<script type="text/javascript">
+    // Konfiguration vor dem Laden des Scripts setzen
+    window.MegaMenuConfig = {
+        termSetName: 'Navigation',           // Name des Taxonomy Term Sets
+        cssUrl: '',                          // Optional: Externe CSS-Datei
+        containerId: 's4-titlerow',          // SharePoint Container ID
+        debug: true                          // Debug-Modus aktivieren
+    };
+</script>
+<script type="text/javascript" src="/SiteAssets/megamenu/megamenu-classic.js"></script>
+```
+
+### Container IDs für verschiedene SharePoint-Versionen
+
+| SharePoint Version | Container ID | Beschreibung |
+|-------------------|--------------|-------------|
+| 2019 | `s4-titlerow` | Standard Titel-Bereich |
+| SE | `suiteBarTop` | Suite Bar Bereich |
+| Custom | `custom-menu-container` | Eigener Container |
+
+### Term Set Konfiguration
+
+Das MegaMenu liest die Navigation aus einem Managed Metadata Term Set:
+
+```
+Navigation (Term Set)
+├── Produkte (Level 1)
+│   ├── Software (Level 2)
+│   │   ├── Office 365 (Level 3) → URL
+│   │   └── SharePoint (Level 3) → URL
+│   └── Hardware (Level 2)
+│       ├── Laptops (Level 3) → URL
+│       └── Server (Level 3) → URL
+└── Services (Level 1)
+    └── Consulting (Level 2)
+        └── SharePoint Beratung (Level 3) → URL
+```
+
+## 🎨 Anpassungen
+
+### CSS Customization
+
+```css
+/* Eigene Farben */
+#Mega-Menu-Classic {
+    background: #your-color;
+}
+
+#Mega-Menu > ul > li > span[role="menuitem"] {
+    color: #your-text-color;
+}
+
+/* Eigene Schriftarten */
+#Mega-Menu {
+    font-family: 'Your Font', Arial, sans-serif;
+}
+```
+
+### JavaScript Events
+
+```javascript
+// Nach der Initialisierung eigene Logik hinzufügen
+document.addEventListener('DOMContentLoaded', function() {
+    // Warten bis MegaMenu geladen ist
+    setTimeout(function() {
+        if (window.MegaMenuClassic) {
+            console.log('MegaMenu ist bereit!');
+            // Eigene Anpassungen hier...
+        }
+    }, 1000);
+});
+```
+
+## 🔧 Erweiterte Konfiguration
+
+### Custom URL Mapping
+
+Die URLs für die Navigation-Links können angepasst werden:
+
+```javascript
+// Überschreibe die getTermUrl Funktion
+window.MegaMenuGetTermUrl = function(term) {
+    var termName = term.get_name();
+    // Eigene URL-Logik
+    return '/custom-pages/' + termName.toLowerCase() + '.aspx';
+};
+```
+
+### Mehrsprachigkeit
+
+```javascript
+window.MegaMenuConfig = {
+    termSetName: _spPageContextInfo.currentUICultureName === 'de-DE' ? 'Navigation_DE' : 'Navigation_EN',
+    // ... andere Konfigurationen
+};
+```
+
+## 🐛 Troubleshooting
+
+### Häufige Probleme
+
+**Problem:** Menü wird nicht angezeigt  
+**Lösung:** 
+- Browser-Konsole auf Fehler prüfen
+- Taxonomy Term Set Name überprüfen
+- Berechtigungen für Term Store prüfen
+
+**Problem:** JavaScript-Fehler "SP is not defined"  
+**Lösung:**
+- Script erst nach SharePoint-Bibliotheken laden
+- `SP.SOD.executeFunc` verwenden
+
+**Problem:** Styling funktioniert nicht  
+**Lösung:**
+- CSS-Pfad überprüfen
+- Cache leeren
+- CSS-Spezifität erhöhen
+
+### Debug-Modus
+
+```javascript
+window.MegaMenuConfig = {
+    debug: true,  // Aktiviert Console-Logging
+    // ... andere Optionen
+};
+```
+
+## 📝 Browser-Unterstützung
+
+- Internet Explorer 11+
+- Microsoft Edge (alle Versionen)
+- Chrome 60+
+- Firefox 55+
+- Safari 12+
+
+## ⚠️ Wichtige Hinweise
+
+1. **Berechtigungen:** Benutzer benötigen Leserechte auf den Term Store
+2. **Performance:** Bei großen Term Sets kann das Laden länger dauern
+3. **Caching:** SharePoint cached Taxonomy-Daten - Änderungen können verzögert sichtbar werden
+4. **Responsive:** Das Menü ist für mobile Geräte optimiert
+
+## 🔄 Migration von SPFx Version
+
+Falls Sie von der SPFx-Version migrieren:
+
+1. SPFx ApplicationCustomizer deaktivieren
+2. Klassische Dateien hochladen und einbinden
+3. Konfiguration anpassen (gleiche Term Sets verwendbar)
+4. Testen und CSS bei Bedarf anpassen
+
+## 📞 Support
+
+Bei Problemen:
+1. Debug-Modus aktivieren
+2. Browser-Konsole prüfen
+3. Term Set Struktur validieren
+4. Dateipfade und Berechtigungen überprüfen
--- a/classic/megamenu-classic.css
+++ b/classic/megamenu-classic.css
@@ -0,0 +1,74 @@
+/**
+ * MegaMenu CSS for Classic SharePoint Pages
+ * Version: 1.0.2
+ * 
+ * This file imports the exact same CSS as the modern SPFx version
+ * to ensure 100% visual consistency.
+ * 
+ * Usage:
+ * 1. Copy the compiled MegaMenu.css from src/extensions/megaMenu/ to your SharePoint assets
+ * 2. Reference it in your master page or via alternate CSS URL:
+ *    <link rel="stylesheet" href="/SiteAssets/MegaMenu.css" />
+ * 
+ * This file provides additional classic-specific adjustments if needed.
+ */
+
+/*
+ * The main MegaMenu.css should be loaded first!
+ * This file only contains classic SharePoint specific overrides.
+ */
+
+/* Classic SharePoint specific container adjustments */
+.megamenu-classic-container {
+    /* Insert after s4-titlerow or other SharePoint containers */
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+/* Ensure proper z-index in classic SharePoint context */
+#Mega-Menu {
+    position: relative;
+    z-index: 999; /* Below SharePoint dialogs but above content */
+}
+
+.mega-menu {
+    z-index: 1000; /* Above the main menu */
+}
+
+/* Classic SharePoint ribbon compatibility */
+body.ms-backgroundImage #Mega-Menu {
+    /* Adjust if SharePoint has background images */
+    position: relative;
+}
+
+/* Ensure settings panel works in classic mode too */
+.mm-settings-panel {
+    z-index: 4001; /* Above everything else */
+}
+
+/* Classic SharePoint v4.master specific adjustments */
+.v4master #Mega-Menu {
+    /* Any v4.master specific styles if needed */
+}
+
+/* Classic SharePoint seattle.master specific adjustments */  
+.seattle #Mega-Menu {
+    /* Any seattle.master specific styles if needed */
+}
+
+/* Responsive adjustments for classic SharePoint layouts */
+@media (max-width: 1024px) {
+    .megamenu-classic-container {
+        /* Classic SharePoint is often used on older devices */
+        overflow-x: auto;
+    }
+}
+
+/* Print styles for classic SharePoint */
+@media print {
+    #Mega-Menu,
+    .megamenu-classic-container {
+        display: none !important;
+    }
+}
--- a/classic/megamenu-classic.js
+++ b/classic/megamenu-classic.js
@@ -0,0 +1,265 @@
+/**
+ * SharePoint MegaMenu for Classic Pages
+ * Version: 1.0.2
+ * 
+ * This version uses standalone services that replicate the SPFx logic
+ * without requiring the SharePoint Framework.
+ * 
+ * Prerequisites:
+ * 1. megamenu-services-standalone.js must be loaded first
+ * 2. MegaMenu.css must be included
+ * 3. SP.js and SP.Taxonomy.js must be available
+ * 
+ * Usage:
+ * <link rel="stylesheet" href="/SiteAssets/megamenu/MegaMenu.css" />
+ * <script src="/SiteAssets/megamenu/megamenu-services-standalone.js"></script>
+ * <script src="/SiteAssets/megamenu/megamenu-classic.js"></script>
+ */
+
+(function() {
+    'use strict';
+
+    var MEGAMENU_UCA_ID = 'abc3361f-bb2d-491f-aba3-cd51c19a299b'; // Same as in MegaMenuApplicationCustomizer.ts
+    
+    var config = window.MegaMenuConfig || {
+        containerId: 's4-titlerow',
+        debug: false
+    };
+
+    function log(message, data) {
+        if (config.debug && console && console.log) {
+            console.log('[MegaMenu Classic] ' + message, data || '');
+        }
+    }
+
+    // Wait for dependencies: SharePoint JSOM, Taxonomy, and our standalone services
+    function waitForDependencies(callback) {
+        if (typeof SP !== 'undefined' && 
+            SP.SOD && 
+            typeof SP.Taxonomy !== 'undefined' &&
+            typeof window.MegaMenuServices !== 'undefined' &&
+            document.readyState === 'complete') {
+            callback();
+        } else {
+            setTimeout(function() { waitForDependencies(callback); }, 100);
+        }
+    }
+
+    // Classic SharePoint context wrapper
+    function createClassicContext() {
+        return {
+            pageContext: {
+                site: {
+                    absoluteUrl: _spPageContextInfo.siteAbsoluteUrl
+                },
+                web: {
+                    absoluteUrl: _spPageContextInfo.webAbsoluteUrl,
+                    permissions: {
+                        hasPermission: function(permission) {
+                            return _spPageContextInfo.isSiteAdmin === true;
+                        }
+                    }
+                }
+            }
+        };
+    }
+
+    // Configuration reader using REST API (same logic as MegaMenuSettings.ts)
+    function readMegaMenuConfiguration(callback) {
+        log('Reading MegaMenu configuration from UserCustomAction...');
+        
+        var restUrl = _spPageContextInfo.siteAbsoluteUrl + 
+            "/_api/site/userCustomActions?$filter=ClientSideComponentId eq guid'" + MEGAMENU_UCA_ID + "'";
+        
+        fetch(restUrl, {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json;odata=nometadata'
+            }
+        })
+        .then(function(response) {
+            if (!response.ok) {
+                throw new Error('HTTP ' + response.status + ' - ' + response.statusText);
+            }
+            return response.json();
+        })
+        .then(function(data) {
+            if (data && data.value && data.value.length > 0) {
+                var uca = data.value[0];
+                try {
+                    var props = JSON.parse(uca.ClientSideComponentProperties);
+                    log('Configuration found', props);
+                    callback(props);
+                } catch (e) {
+                    log('Error parsing UserCustomAction properties: ' + e.message);
+                    callback({ termSetName: 'Navigation', cssUrl: '' });
+                }
+            } else {
+                log('No UserCustomAction found - using defaults');
+                callback({ termSetName: 'Navigation', cssUrl: '' });
+            }
+        })
+        .catch(function(error) {
+            log('Error reading configuration: ' + error.message);
+            callback({ termSetName: 'Navigation', cssUrl: '' });
+        });
+    }
+
+    // Load external CSS (same as SPFx version)
+    function loadExternalCSS(cssUrl) {
+        if (!cssUrl) return;
+        
+        var link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.type = 'text/css';
+        link.href = cssUrl;
+        link.onerror = function() {
+            log('Failed to load external CSS: ' + cssUrl);
+        };
+        link.onload = function() {
+            log('External CSS loaded successfully: ' + cssUrl);
+        };
+        document.head.appendChild(link);
+    }
+
+    // Main initialization
+    function initMegaMenu() {
+        log('Initializing MegaMenu for classic SharePoint...');
+        
+        // Check if services are available
+        if (!window.MegaMenuServices) {
+            console.error('[MegaMenu] Standalone services not found! Please include megamenu-services-standalone.js first.');
+            return;
+        }
+        
+        readMegaMenuConfiguration(function(props) {
+            log('Using configuration:', props);
+            
+            // Load external CSS if specified
+            if (props.cssUrl) {
+                loadExternalCSS(props.cssUrl);
+            }
+            
+            // Create context
+            var context = createClassicContext();
+            
+            // Create taxonomy service using standalone implementation
+            var taxonomyService = new window.MegaMenuServices.TaxonomyNavigationService(
+                context, 
+                props.termSetName
+            );
+            
+            // Load menu items
+            taxonomyService.getMenuItems()
+                .then(function(menuItems) {
+                    log('Menu items loaded:', menuItems);
+                    
+                    // Find target container
+                    var container = document.getElementById(config.containerId);
+                    if (!container) {
+                        log('Container not found: ' + config.containerId + '. Creating fallback container.');
+                        // Create fallback container at top of page
+                        container = document.createElement('div');
+                        container.id = 'megamenu-fallback-container';
+                        document.body.insertBefore(container, document.body.firstChild);
+                    }
+                    
+                    // Create menu wrapper
+                    var menuWrapper = document.createElement('div');
+                    menuWrapper.className = 'megamenu-classic-container';
+                    
+                    // Insert menu wrapper
+                    if (container.nextSibling) {
+                        container.parentNode.insertBefore(menuWrapper, container.nextSibling);
+                    } else {
+                        container.parentNode.appendChild(menuWrapper);
+                    }
+                    
+                    // Create renderer using standalone implementation
+                    var renderer = new window.MegaMenuServices.MegaMenuRenderer(
+                        context,
+                        menuItems,
+                        function(updatedProps) {
+                            log('Properties updated (not persisted in classic mode):', updatedProps);
+                        }
+                    );
+                    
+                    // Render the menu
+                    renderer.render(menuWrapper);
+                    
+                    log('✅ MegaMenu rendered successfully!');
+                })
+                .catch(function(error) {
+                    console.error('[MegaMenu] Error loading menu items:', error);
+                    
+                    // Show error message to user
+                    var container = document.getElementById(config.containerId);
+                    if (container) {
+                        var errorDiv = document.createElement('div');
+                        errorDiv.style.cssText = 'background:#ffebee;color:#c62828;padding:10px;border:1px solid #ef5350;margin:5px 0;';
+                        errorDiv.innerHTML = '<strong>MegaMenu Error:</strong> ' + error.message + 
+                                          '<br><small>Check browser console for details.</small>';
+                        
+                        if (container.nextSibling) {
+                            container.parentNode.insertBefore(errorDiv, container.nextSibling);
+                        } else {
+                            container.parentNode.appendChild(errorDiv);
+                        }
+                    }
+                });
+        });
+    }
+
+    // Bootstrap function
+    function bootstrap() {
+        log('Bootstrapping MegaMenu...');
+        
+        // Wait for SharePoint JSOM to be ready
+        if (typeof SP === 'undefined' || !SP.SOD) {
+            setTimeout(bootstrap, 100);
+            return;
+        }
+        
+        // Load required SharePoint libraries
+        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
+            SP.SOD.executeFunc('sp.taxonomy.js', 'SP.Taxonomy.TaxonomySession', function() {
+                // Wait for all dependencies and initialize
+                waitForDependencies(function() {
+                    initMegaMenu();
+                });
+            });
+        });
+    }
+
+    // Auto-start based on DOM state
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', bootstrap);
+    } else {
+        // DOM already loaded
+        setTimeout(bootstrap, 100);
+    }
+
+    // Expose public API
+    window.MegaMenuClassic = {
+        init: initMegaMenu,
+        bootstrap: bootstrap,
+        config: config,
+        
+        // Utility methods
+        setConfig: function(newConfig) {
+            Object.assign(config, newConfig);
+        },
+        
+        reload: function() {
+            // Remove existing menu and reload
+            var existing = document.querySelector('.megamenu-classic-container');
+            if (existing) {
+                existing.remove();
+            }
+            initMegaMenu();
+        }
+    };
+
+    log('MegaMenu Classic wrapper loaded. Waiting for dependencies...');
+
+})();
--- a/classic/megamenu-services-standalone.js
+++ b/classic/megamenu-services-standalone.js
@@ -0,0 +1,468 @@
+/**
+ * Standalone MegaMenu Services for Classic SharePoint
+ * 
+ * This file contains extracted and adapted versions of the SPFx services
+ * that work in classic SharePoint without SPFx dependencies.
+ */
+
+(function(global) {
+    'use strict';
+
+    // ===========================================
+    // 1. UTILITY CLASSES (from SPFx services)
+    // ===========================================
+
+    class ItemDictionary {
+        constructor() {
+            this._items = {};
+        }
+
+        Add(key, value) {
+            this._items[key] = value;
+        }
+
+        Get(key) {
+            return this._items[key];
+        }
+    }
+
+    class MenuItem {
+        constructor(term, depth, siteCollectionUrl) {
+            this.title = term.Name;
+            this.url = this._getNavigationUrl(term, siteCollectionUrl);
+            this.items = [];
+            this.pathDepth = this._calculateDepth(term.PathOfTerm);
+            this.parentId = this._getParentId(term.PathOfTerm);
+            this.id = term.Id;
+            this._term = term;
+        }
+
+        _calculateDepth(pathOfTerm) {
+            if (!pathOfTerm) return 1;
+            return pathOfTerm.split(';').length;
+        }
+
+        _getParentId(pathOfTerm) {
+            if (!pathOfTerm) return null;
+            const parts = pathOfTerm.split(';');
+            if (parts.length <= 1) return null;
+            // Return parent term ID (simplified - may need adjustment)
+            return parts[parts.length - 2];
+        }
+
+        _getNavigationUrl(term, siteCollectionUrl) {
+            // Extract URL from term properties
+            if (term.LocalCustomProperties && term.LocalCustomProperties._Sys_Nav_SimpleLinkUrl) {
+                return term.LocalCustomProperties._Sys_Nav_SimpleLinkUrl;
+            }
+            
+            // Fallback: generate URL based on term name
+            const termName = term.Name.toLowerCase().replace(/[^a-z0-9]/g, '-');
+            return `${siteCollectionUrl}/pages/${termName}.aspx`;
+        }
+    }
+
+    // ===========================================
+    // 2. TAXONOMY NAVIGATION SERVICE (adapted)
+    // ===========================================
+
+    class TaxonomyNavigationService {
+        constructor(context, termSetName) {
+            this.context = context;
+            this.termSetName = termSetName;
+            this._siteCollectionUrl = context.pageContext.site.absoluteUrl;
+        }
+
+        async getMenuItems() {
+            console.log('[TaxonomyService] Loading terms for:', this.termSetName);
+            
+            try {
+                const termSet = await this._loadTermSet(this.termSetName);
+                return this._processTerms(termSet);
+            } catch (error) {
+                console.error('[TaxonomyService] Error loading terms:', error);
+                return [this._createNoTermsItem()];
+            }
+        }
+
+        _loadTermSet(termSetName) {
+            return new Promise((resolve, reject) => {
+                const context = SP.ClientContext.get_current();
+                const session = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);
+                const termStore = session.getDefaultSiteCollectionTermStore();
+                const termSets = termStore.getTermSetsByName(termSetName, 1033);
+                
+                context.load(termSets);
+                
+                context.executeQueryAsync(
+                    () => {
+                        if (termSets.get_count() > 0) {
+                            const termSet = termSets.get_item(0);
+                            const terms = termSet.get_terms();
+                            context.load(terms);
+                            
+                            context.executeQueryAsync(
+                                () => {
+                                    // Load all terms with their properties and children
+                                    this._loadAllTermsRecursively(context, terms, resolve, reject);
+                                },
+                                (sender, args) => reject(new Error(args.get_message()))
+                            );
+                        } else {
+                            reject(new Error(`Term set '${termSetName}' not found`));
+                        }
+                    },
+                    (sender, args) => reject(new Error(args.get_message()))
+                );
+            });
+        }
+
+        _loadAllTermsRecursively(context, terms, resolve, reject) {
+            const allTerms = [];
+            const termsEnum = terms.getEnumerator();
+            
+            // First pass: collect all terms
+            while (termsEnum.moveNext()) {
+                const term = termsEnum.get_current();
+                context.load(term, 'Id', 'Name', 'PathOfTerm', 'LocalCustomProperties');
+                allTerms.push(term);
+                
+                // Load child terms
+                const childTerms = term.get_terms();
+                context.load(childTerms);
+                this._loadChildTermsRecursively(context, childTerms, allTerms);
+            }
+
+            // Execute query to load all data
+            context.executeQueryAsync(
+                () => {
+                    const processedTerms = allTerms.map(term => ({
+                        Id: term.get_id().toString(),
+                        Name: term.get_name(),
+                        PathOfTerm: term.get_pathOfTerm(),
+                        LocalCustomProperties: this._getCustomProperties(term),
+                        IsRoot: term.get_pathOfTerm().split(';').length === 1
+                    }));
+                    
+                    resolve(processedTerms);
+                },
+                (sender, args) => reject(new Error(args.get_message()))
+            );
+        }
+
+        _loadChildTermsRecursively(context, childTerms, allTerms) {
+            const childEnum = childTerms.getEnumerator();
+            while (childEnum.moveNext()) {
+                const childTerm = childEnum.get_current();
+                context.load(childTerm, 'Id', 'Name', 'PathOfTerm', 'LocalCustomProperties');
+                allTerms.push(childTerm);
+                
+                // Recursively load grandchildren
+                const grandChildTerms = childTerm.get_terms();
+                context.load(grandChildTerms);
+                this._loadChildTermsRecursively(context, grandChildTerms, allTerms);
+            }
+        }
+
+        _getCustomProperties(term) {
+            try {
+                const props = term.get_localCustomProperties();
+                return {
+                    _Sys_Nav_SimpleLinkUrl: props._Sys_Nav_SimpleLinkUrl || null,
+                    _Sys_Nav_HoverText: props._Sys_Nav_HoverText || null
+                };
+            } catch (e) {
+                return {};
+            }
+        }
+
+        _processTerms(termsData) {
+            const itemsDict = new ItemDictionary();
+            const menuItems = [];
+            
+            // Create MenuItem objects
+            termsData.forEach(termData => {
+                const menuItem = new MenuItem(termData, 0, this._siteCollectionUrl);
+                itemsDict.Add(termData.Id, menuItem);
+                
+                if (menuItem.pathDepth === 1) {
+                    menuItems.push(menuItem);
+                }
+            });
+
+            // Build hierarchy
+            termsData.forEach(termData => {
+                if (termData.PathOfTerm && termData.PathOfTerm.split(';').length > 1) {
+                    const menuItem = itemsDict.Get(termData.Id);
+                    const parentId = menuItem.parentId;
+                    const parentItem = itemsDict.Get(parentId);
+                    
+                    if (parentItem) {
+                        parentItem.items.push(menuItem);
+                    }
+                }
+            });
+
+            return menuItems.length > 0 ? menuItems : [this._createNoTermsItem()];
+        }
+
+        _createNoTermsItem() {
+            return new MenuItem({
+                Id: 'no-terms',
+                Name: 'Es wurden keine Terms gefunden. Bitte überprüfen Sie Ihre Einstellungen.',
+                PathOfTerm: '',
+                LocalCustomProperties: {}
+            }, 0, this._siteCollectionUrl);
+        }
+    }
+
+    // ===========================================
+    // 3. MEGA MENU RENDERER (adapted from SPFx)
+    // ===========================================
+
+    class MegaMenuRenderer {
+        constructor(context, menuItems, updateCallback) {
+            this.context = context;
+            this.menuItems = menuItems;
+            this.updateCallback = updateCallback;
+        }
+
+        render(container) {
+            container.innerHTML = '';
+
+            const nav = document.createElement('nav');
+            nav.id = 'Mega-Menu';
+            nav.className = 'mega-menu-main';
+            nav.setAttribute('role', 'navigation');
+            nav.setAttribute('aria-label', 'Hauptnavigation');
+
+            const topLevelUl = document.createElement('ul');
+            topLevelUl.setAttribute('role', 'menubar');
+
+            this.menuItems.forEach(topLevelItem => {
+                const topLevelLi = this.createTopLevelItem(topLevelItem);
+                topLevelUl.appendChild(topLevelLi);
+            });
+
+            // Add settings if user has permissions (simplified check)
+            if (this._hasManagePermissions()) {
+                topLevelUl.appendChild(this.createSettingsItem());
+            }
+
+            nav.appendChild(topLevelUl);
+            container.appendChild(nav);
+
+            this.attachEventListeners();
+            this.createScreenReaderAnnouncer();
+        }
+
+        createTopLevelItem(item) {
+            const li = document.createElement('li');
+            li.setAttribute('role', 'none');
+
+            if (item.url && item.items.length === 0) {
+                // Simple link
+                const a = document.createElement('a');
+                a.href = item.url;
+                a.textContent = item.title;
+                a.className = 'menu-item-link';
+                a.setAttribute('role', 'menuitem');
+                a.setAttribute('tabindex', '0');
+                li.appendChild(a);
+            } else {
+                // Menu with submenu
+                const span = document.createElement('span');
+                span.textContent = item.title;
+                span.className = 'menu-item-text';
+                span.setAttribute('role', 'menuitem');
+                span.setAttribute('tabindex', '0');
+                span.setAttribute('aria-haspopup', 'true');
+                span.setAttribute('aria-expanded', 'false');
+                li.appendChild(span);
+
+                if (item.items.length > 0) {
+                    const megaMenu = this.createMegaMenu(item.items);
+                    li.appendChild(megaMenu);
+                }
+            }
+
+            return li;
+        }
+
+        createMegaMenu(categories) {
+            const megaMenuDiv = document.createElement('div');
+            megaMenuDiv.className = 'mega-menu';
+            megaMenuDiv.setAttribute('role', 'menu');
+
+            const gridDiv = document.createElement('div');
+            gridDiv.className = 'mega-menu-grid';
+
+            categories.forEach(category => {
+                const categoryDiv = this.createCategory(category);
+                gridDiv.appendChild(categoryDiv);
+            });
+
+            megaMenuDiv.appendChild(gridDiv);
+            return megaMenuDiv;
+        }
+
+        createCategory(category) {
+            const categoryDiv = document.createElement('div');
+            categoryDiv.className = 'mega-menu-category';
+
+            const h3 = document.createElement('h3');
+            
+            if (category.url) {
+                const a = document.createElement('a');
+                a.href = category.url;
+                a.textContent = category.title;
+                a.setAttribute('tabindex', '0');
+                h3.appendChild(a);
+            } else {
+                const span = document.createElement('span');
+                span.textContent = category.title;
+                h3.appendChild(span);
+            }
+
+            categoryDiv.appendChild(h3);
+
+            if (category.items.length > 0) {
+                const ul = document.createElement('ul');
+                ul.setAttribute('role', 'group');
+
+                category.items.forEach(link => {
+                    const li = document.createElement('li');
+                    li.setAttribute('role', 'none');
+
+                    const a = document.createElement('a');
+                    a.href = link.url;
+                    a.textContent = link.title;
+                    a.setAttribute('role', 'menuitem');
+                    a.setAttribute('tabindex', '0');
+
+                    li.appendChild(a);
+                    ul.appendChild(li);
+                });
+
+                categoryDiv.appendChild(ul);
+            }
+
+            return categoryDiv;
+        }
+
+        createSettingsItem() {
+            const li = document.createElement('li');
+            li.setAttribute('role', 'none');
+
+            const button = document.createElement('button');
+            button.className = 'menu-item-settings';
+            button.setAttribute('type', 'button');
+            button.setAttribute('role', 'menuitem');
+            button.setAttribute('tabindex', '0');
+            button.setAttribute('aria-label', 'Einstellungen');
+            button.onclick = () => this._openSettings();
+
+            const icon = document.createElement('i');
+            icon.className = 'ms-Icon ms-Icon--Settings menu-item-settings__icon';
+            icon.setAttribute('aria-hidden', 'true');
+            button.appendChild(icon);
+
+            li.appendChild(button);
+            return li;
+        }
+
+        attachEventListeners() {
+            // Keyboard and mouse event handling (simplified)
+            const menuItems = document.querySelectorAll('#Mega-Menu [role="menuitem"]');
+            menuItems.forEach(item => {
+                item.addEventListener('keydown', this.handleKeyDown.bind(this));
+                
+                const parent = item.parentElement;
+                if (parent && parent.querySelector('.mega-menu')) {
+                    parent.addEventListener('mouseenter', this.showMegaMenu);
+                    parent.addEventListener('mouseleave', this.hideMegaMenu);
+                }
+            });
+        }
+
+        createScreenReaderAnnouncer() {
+            // Accessibility support
+            const announcer = document.createElement('div');
+            announcer.id = 'mega-menu-announcer';
+            announcer.className = 'sr-only';
+            announcer.setAttribute('aria-live', 'polite');
+            announcer.setAttribute('aria-atomic', 'true');
+            document.body.appendChild(announcer);
+        }
+
+        showMegaMenu() {
+            const megaMenu = this.querySelector('.mega-menu');
+            if (megaMenu) {
+                megaMenu.classList.add('js-open');
+                const menuItem = this.querySelector('[role="menuitem"]');
+                if (menuItem) {
+                    menuItem.setAttribute('aria-expanded', 'true');
+                }
+            }
+        }
+
+        hideMegaMenu() {
+            const megaMenu = this.querySelector('.mega-menu');
+            if (megaMenu) {
+                megaMenu.classList.remove('js-open');
+                const menuItem = this.querySelector('[role="menuitem"]');
+                if (menuItem) {
+                    menuItem.setAttribute('aria-expanded', 'false');
+                }
+            }
+        }
+
+        handleKeyDown(e) {
+            // Keyboard navigation logic (simplified)
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                const parent = e.target.parentElement;
+                const megaMenu = parent.querySelector('.mega-menu');
+                if (megaMenu) {
+                    megaMenu.classList.toggle('js-open');
+                    e.target.setAttribute('aria-expanded', 
+                        megaMenu.classList.contains('js-open') ? 'true' : 'false');
+                }
+            } else if (e.key === 'Escape') {
+                const megaMenu = document.querySelector('.mega-menu.js-open');
+                if (megaMenu) {
+                    megaMenu.classList.remove('js-open');
+                    const menuItem = megaMenu.parentElement.querySelector('[role="menuitem"]');
+                    if (menuItem) {
+                        menuItem.setAttribute('aria-expanded', 'false');
+                        menuItem.focus();
+                    }
+                }
+            }
+        }
+
+        _hasManagePermissions() {
+            // Simplified permission check for classic SharePoint
+            return _spPageContextInfo.isSiteAdmin || false;
+        }
+
+        _openSettings() {
+            console.log('[MegaMenu] Settings not implemented in classic mode');
+            alert('Einstellungen sind nur in der modernen SPFx-Version verfügbar.');
+        }
+    }
+
+    // ===========================================
+    // 4. EXPOSE SERVICES GLOBALLY
+    // ===========================================
+
+    global.MegaMenuServices = {
+        TaxonomyNavigationService: TaxonomyNavigationService,
+        MegaMenuRenderer: MegaMenuRenderer,
+        MenuItem: MenuItem,
+        ItemDictionary: ItemDictionary
+    };
+
+    console.log('[MegaMenu] Standalone services loaded successfully');
+
+})(window);
--- a/config/config.json
+++ b/config/config.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "mega-menu-application-customizer": {
+      "components": [
+        {
+          "entrypoint": "./lib/extensions/megaMenu/MegaMenuApplicationCustomizer.js",
+          "manifest": "./src/extensions/megaMenu/MegaMenuApplicationCustomizer.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "MegaMenuApplicationCustomizerStrings": "lib/extensions/megaMenu/loc/{locale}.js"
+  }
+}
--- a/config/copy-assets.json
+++ b/config/copy-assets.json
@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
+  "deployCdnPath": "temp/deploy"
+}
--- a/config/deploy-azure-storage.json
+++ b/config/deploy-azure-storage.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
+  "workingDir": "./temp/deploy/",
+  "account": "<!-- STORAGE ACCOUNT NAME -->",
+  "container": "mega-menu",
+  "accessKey": "<!-- ACCESS KEY -->"
+}
--- a/config/package-solution.json
+++ b/config/package-solution.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "mega-menu-client-side-solution",
+    "id": "f4660e06-ce08-43ee-bfb7-5c4464e01133",
+    "version": "1.0.7.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true
+  },
+  "paths": {
+    "zippedPackage": "solution/mega-menu.sppkg"
+  }
+}
--- a/config/serve.json
+++ b/config/serve.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
+  "port": 4321,
+  "https": true,
+  "serveConfigurations": {
+    "default": {
+      "pageUrl": "https://sharepoint.contoso.local/SitePages/Neues-Zuhause.aspx",
+      "customActions": {
+        "abc3361f-bb2d-491f-aba3-cd51c19a299b": {
+          "location": "ClientSideExtension.ApplicationCustomizer",
+          "properties": {
+            "termSetName": "Horizontale Navigation",
+            "additionalCssUrl": "/siteAssets/Navigation/Navigation.css"
+          }
+        }
+      }
+    },
+    "megaMenu": {
+      "pageUrl": "https://contoso.sharepoint.com/sites/mySite/SitePages/myPage.aspx",
+      "customActions": {
+        "abc3361f-bb2d-491f-aba3-cd51c19a299b": {
+          "location": "ClientSideExtension.ApplicationCustomizer",
+          "properties": {
+            "testMessage": "Test message"
+          }
+        }
+      }
+    }
+  }
+}
--- a/config/write-manifests.json
+++ b/config/write-manifests.json
@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
+  "cdnBasePath": "<!-- PATH TO CDN -->"
+}
--- a/deployment/add-megamenu.ps1
+++ b/deployment/add-megamenu.ps1
@@ -0,0 +1,104 @@
+param(
+    [Parameter(Mandatory = $true)]
+    [Alias('WebUrl')]
+    [string]$SiteUrl,
+
+    [string]$TermSetName = '',
+
+    [string]$CssUrl = '',
+
+    [switch]$EnableDebug,
+
+    [string]$Description = 'MSFT-Custom-Solution:MegaMenu'
+)
+
+Add-PSSnapin Microsoft.SharePoint.PowerShell -ErrorAction SilentlyContinue | Out-Null
+
+$componentId = 'abc3361f-bb2d-491f-aba3-cd51c19a299b'
+$location = 'ClientSideExtension.ApplicationCustomizer'
+$name = 'MegaMenu'
+$title = 'Mega Menu'
+
+function Get-MegaMenuPropertiesJson {
+    param(
+        [string]$CurrentTermSetName,
+        [string]$CurrentCssUrl,
+        [bool]$CurrentDebug
+    )
+
+    return (@{
+        termSetName = $CurrentTermSetName
+        cssUrl = $CurrentCssUrl
+        debug = $CurrentDebug
+    } | ConvertTo-Json -Depth 10 -Compress)
+}
+
+function Remove-WebScopedComponentActions {
+    param(
+        [Microsoft.SharePoint.SPSite]$CurrentSite,
+        [string]$CurrentComponentId,
+        [string]$CurrentLocation
+    )
+
+    $removedCount = 0
+
+    foreach ($web in $CurrentSite.AllWebs) {
+        try {
+            $webActions = @($web.UserCustomActions | Where-Object {
+                $_.Location -eq $CurrentLocation -and
+                $_.ClientSideComponentId -and
+                $_.ClientSideComponentId.ToString().ToLower() -eq $CurrentComponentId
+            })
+
+            foreach ($webAction in $webActions) {
+                $web.UserCustomActions.Delete($webAction.Id)
+                $removedCount++
+            }
+
+            if ($webActions.Count -gt 0) {
+                $web.Update()
+            }
+        }
+        finally {
+            $web.Dispose()
+        }
+    }
+
+    return $removedCount
+}
+
+$site = Get-SPSite -Identity $SiteUrl
+try {
+    $removedWebScopedActions = Remove-WebScopedComponentActions -CurrentSite $site -CurrentComponentId $componentId -CurrentLocation $location
+
+    $existingAction = $site.UserCustomActions | Where-Object {
+        $_.Location -eq $location -and $_.ClientSideComponentId -and $_.ClientSideComponentId.ToString().ToLower() -eq $componentId
+    } | Select-Object -First 1
+
+    if ($existingAction) {
+        $action = $existingAction
+        Write-Host 'Aktualisiere vorhandene site-scoped Mega Menu UserCustomAction...' -ForegroundColor Yellow
+    }
+    else {
+        $action = $site.UserCustomActions.Add()
+        Write-Host 'Erstelle neue site-scoped Mega Menu UserCustomAction...' -ForegroundColor Yellow
+    }
+
+    $action.Name = $name
+    $action.Title = $title
+    $action.Description = $Description
+    $action.Location = $location
+    $action.ClientSideComponentId = [Guid]$componentId
+    $action.ClientSideComponentProperties = Get-MegaMenuPropertiesJson -CurrentTermSetName $TermSetName -CurrentCssUrl $CssUrl -CurrentDebug ([bool]$EnableDebug.IsPresent)
+    $action.Update()
+
+    Write-Host 'Mega Menu wurde site-scoped registriert.' -ForegroundColor Green
+    Write-Host ('Entfernte web-scoped Eintraege: ' + $removedWebScopedActions)
+    Write-Host ('Beschreibung: ' + $Description)
+    Write-Host ('Properties: ' + $action.ClientSideComponentProperties)
+}
+finally {
+    if ($site) {
+        $site.Dispose()
+    }
+}
--- a/dist/abc3361f-bb2d-491f-aba3-cd51c19a299b.manifest.json
+++ b/dist/abc3361f-bb2d-491f-aba3-cd51c19a299b.manifest.json
@@ -0,0 +1,56 @@
+{
+  "id": "abc3361f-bb2d-491f-aba3-cd51c19a299b",
+  "alias": "MegaMenuApplicationCustomizer",
+  "componentType": "Extension",
+  "extensionType": "ApplicationCustomizer",
+  "version": "1.0.4",
+  "manifestVersion": 2,
+  "requiresCustomScript": false,
+  "loaderConfig": {
+    "entryModuleId": "mega-menu-application-customizer",
+    "internalModuleBaseUrls": [
+      "https://localhost:4321/"
+    ],
+    "scriptResources": {
+      "mega-menu-application-customizer": {
+        "type": "path",
+        "path": "dist/mega-menu-application-customizer.js"
+      },
+      "MegaMenuApplicationCustomizerStrings": {
+        "defaultPath": "lib/extensions/megaMenu/loc/en-us.js",
+        "type": "localizedPath",
+        "paths": {}
+      },
+      "@microsoft/decorators": {
+        "type": "component",
+        "version": "1.4.1",
+        "id": "f97266fb-ccb7-430e-9384-4124d05295d3"
+      },
+      "@microsoft/sp-core-library": {
+        "type": "component",
+        "version": "1.4.1",
+        "id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b"
+      },
+      "@microsoft/sp-application-base": {
+        "type": "component",
+        "version": "1.4.1",
+        "id": "4df9bb86-ab0a-4aab-ab5f-48bf167048fb"
+      },
+      "@microsoft/sp-http": {
+        "type": "component",
+        "version": "1.4.1",
+        "id": "c07208f0-ea3b-4c1a-9965-ac1b825211a6"
+      },
+      "@microsoft/sp-lodash-subset": {
+        "type": "component",
+        "version": "1.4.1",
+        "id": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a"
+      },
+      "@microsoft/sp-page-context": {
+        "type": "component",
+        "version": "1.4.1",
+        "id": "1c4541f7-5c31-41aa-9fa8-fbc9dc14c0a8"
+      }
+    }
+  }
+}
--- a/dist/mega-menu-application-customizer.js
+++ b/dist/mega-menu-application-customizer.js
--- a/dist/mega-menu-application-customizer.js.map
+++ b/dist/mega-menu-application-customizer.js.map
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -0,0 +1,7 @@
+'use strict';
+
+const build = require('@microsoft/sp-build-web');
+
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
+
+build.initialize(require('gulp'));
--- a/lib/extensions/megaMenu/MegaMenu.module.css
+++ b/lib/extensions/megaMenu/MegaMenu.module.css
--- a/lib/extensions/megaMenu/MegaMenu.module.scss.d.ts
+++ b/lib/extensions/megaMenu/MegaMenu.module.scss.d.ts
@@ -0,0 +1,5 @@
+declare const styles: {
+    mmSlideIn: string;
+    mmFadeIn: string;
+};
+export default styles;
--- a/lib/extensions/megaMenu/MegaMenu.module.scss.js
+++ b/lib/extensions/megaMenu/MegaMenu.module.scss.js
@@ -0,0 +1,10 @@
+/* tslint:disable */
+require('./MegaMenu.module.css');
+var styles = {
+    mmSlideIn: 'mmSlideIn_09a8e1a7',
+    mmFadeIn: 'mmFadeIn_09a8e1a7',
+};
+export default styles;
+/* tslint:enable */ 
+
+//# sourceMappingURL=MegaMenu.module.scss.js.map
--- a/lib/extensions/megaMenu/MegaMenu.module.scss.js.map
+++ b/lib/extensions/megaMenu/MegaMenu.module.scss.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["extensions/megaMenu/MegaMenu.module.scss.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,CAAC,uBAAuB,CAAC,CAAC;AACjC,IAAM,MAAM,GAAG;IACb,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE,mBAAmB;CAC9B,CAAC;AAEF,eAAe,MAAM,CAAC;AACtB,mBAAmB","file":"extensions/megaMenu/MegaMenu.module.scss.js","sourcesContent":["/* tslint:disable */\r\nrequire('./MegaMenu.module.css');\r\nconst styles = {\r\n  mmSlideIn: 'mmSlideIn_09a8e1a7',\r\n  mmFadeIn: 'mmFadeIn_09a8e1a7',\r\n};\r\n\r\nexport default styles;\r\n/* tslint:enable */"],"sourceRoot":"..\\..\\..\\src"}
--- a/lib/extensions/megaMenu/MegaMenuApplicationCustomizer.d.ts
+++ b/lib/extensions/megaMenu/MegaMenuApplicationCustomizer.d.ts
@@ -0,0 +1,27 @@
+import { BaseApplicationCustomizer } from '@microsoft/sp-application-base';
+import './MegaMenu.module.scss';
+export declare const UserCustomActionMegaMenuId: string;
+/**
+ * Properties for the MegaMenu Application Customizer
+ */
+export interface IMegaMenuApplicationCustomizerProperties {
+    /**
+     * The name of the termset to load menu items from
+     */
+    termSetName: string;
+    /**
+     * Optional URL to an external CSS file
+     */
+    cssUrl?: string;
+}
+/** A Custom Action which can be run during execution of a Client Side Application */
+export default class MegaMenuApplicationCustomizer extends BaseApplicationCustomizer<IMegaMenuApplicationCustomizerProperties> {
+    private _topPlaceholder;
+    onInit(): Promise<void>;
+    private _renderPlaceHolders();
+    private _updateCallback;
+    private _renderMegaMenu(termSetName);
+    private _getOrCreateContainer(id, placeholder);
+    private _loadExternalCss(cssUrl);
+    private _onDispose();
+}
--- a/lib/extensions/megaMenu/MegaMenuApplicationCustomizer.js
+++ b/lib/extensions/megaMenu/MegaMenuApplicationCustomizer.js
@@ -0,0 +1,188 @@
+// tslint:disable:max-line-length
+// tslint:disable:match-default-export-name
+// tslint:disable:typedef
+// tslint:disable:variable-name
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [0, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { override } from '@microsoft/decorators';
+import { Log } from '@microsoft/sp-core-library';
+import { BaseApplicationCustomizer, PlaceholderName } from '@microsoft/sp-application-base';
+import * as strings from 'MegaMenuApplicationCustomizerStrings';
+import { TaxonomyNavigationService } from '../../services/TaxonomyNavigationService';
+import { MegaMenuRenderer } from './MegaMenuRenderer';
+// Import SCSS module
+import './MegaMenu.module.scss';
+var LOG_SOURCE = 'MegaMenuApplicationCustomizer';
+export var UserCustomActionMegaMenuId = 'abc3361f-bb2d-491f-aba3-cd51c19a299b';
+/** A Custom Action which can be run during execution of a Client Side Application */
+var MegaMenuApplicationCustomizer = (function (_super) {
+    __extends(MegaMenuApplicationCustomizer, _super);
+    function MegaMenuApplicationCustomizer() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._updateCallback = function (data) {
+            _this._loadExternalCss(data.cssUrl);
+            _this._renderMegaMenu(data.termSetName);
+        };
+        return _this;
+    }
+    MegaMenuApplicationCustomizer.prototype.onInit = function () {
+        Log.info(LOG_SOURCE, "Initialized " + strings.Title);
+        // Load external CSS if provided
+        if (this.properties.cssUrl) {
+            this._loadExternalCss(this.properties.cssUrl);
+        }
+        // Wait for the page to be ready
+        this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
+        // Initial render
+        this._renderPlaceHolders();
+        return Promise.resolve();
+    };
+    MegaMenuApplicationCustomizer.prototype._renderPlaceHolders = function () {
+        console.log('Available placeholders: ', this.context.placeholderProvider.placeholderNames.map(function (name) { return PlaceholderName[name]; }).join(', '));
+        // Handling the top placeholder
+        if (!this._topPlaceholder) {
+            this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top, { onDispose: this._onDispose });
+            // The extension should not assume that the expected placeholder is available.
+            if (!this._topPlaceholder) {
+                console.error('The expected placeholder (Top) was not found.');
+                return;
+            }
+            if (!this.properties.termSetName) {
+                console.error('TermSetName property is required but not provided.');
+                1;
+                return;
+            }
+            this._renderMegaMenu(this.properties.termSetName);
+        }
+    };
+    MegaMenuApplicationCustomizer.prototype._renderMegaMenu = function (termSetName) {
+        return __awaiter(this, void 0, void 0, function () {
+            var taxonomyService, menuItems, renderer, container, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!this._topPlaceholder) {
+                            return [2 /*return*/];
+                        }
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        taxonomyService = new TaxonomyNavigationService(this.context, termSetName);
+                        return [4 /*yield*/, taxonomyService.getMenuItems()];
+                    case 2:
+                        menuItems = _a.sent();
+                        renderer = new MegaMenuRenderer(this.context, menuItems, this._updateCallback);
+                        container = this._getOrCreateContainer('CustomHeader', this._topPlaceholder);
+                        if (container) {
+                            renderer.render(container);
+                        }
+                        else {
+                            renderer.render(this._topPlaceholder.domElement);
+                        }
+                        Log.info(LOG_SOURCE, "MegaMenu rendered successfully with " + menuItems.length + " top-level items");
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_1 = _a.sent();
+                        console.error('Error rendering MegaMenu:', error_1);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    MegaMenuApplicationCustomizer.prototype._getOrCreateContainer = function (id, placeholder) {
+        var container = document.getElementById(id);
+        if (container) {
+            var div = document.createElement('div');
+            container.appendChild(div);
+            return div;
+        }
+        else {
+            return placeholder.domElement;
+        }
+    };
+    MegaMenuApplicationCustomizer.prototype._loadExternalCss = function (cssUrl) {
+        var externalCssLinkId = 'mega-menu-additional-css-34FAB720';
+        var link = document.getElementById(externalCssLinkId);
+        if (cssUrl && cssUrl.trim() !== '') {
+            // update previous link, if present
+            if (!link) {
+                var head = document.getElementsByTagName('head')[0];
+                link = document.createElement('link');
+                link.rel = 'stylesheet';
+                link.type = 'text/css';
+                link.id = externalCssLinkId;
+                link.onload = function () {
+                    Log.info(LOG_SOURCE, "External CSS loaded successfully from: " + cssUrl);
+                };
+                link.onerror = function () {
+                    console.warn("Failed to load external CSS from: " + cssUrl);
+                };
+                head.appendChild(link);
+            }
+            link.href = cssUrl;
+        }
+        else if (link) {
+            link.remove();
+        }
+    };
+    MegaMenuApplicationCustomizer.prototype._onDispose = function () {
+        console.log('[MegaMenuApplicationCustomizer._onDispose] Disposed custom top placeholder.');
+    };
+    __decorate([
+        override
+    ], MegaMenuApplicationCustomizer.prototype, "onInit", null);
+    return MegaMenuApplicationCustomizer;
+}(BaseApplicationCustomizer));
+export default MegaMenuApplicationCustomizer;
+
+//# sourceMappingURL=MegaMenuApplicationCustomizer.js.map
--- a/lib/extensions/megaMenu/MegaMenuApplicationCustomizer.js.map
+++ b/lib/extensions/megaMenu/MegaMenuApplicationCustomizer.js.map
--- a/lib/extensions/megaMenu/MegaMenuApplicationCustomizer.manifest.json
+++ b/lib/extensions/megaMenu/MegaMenuApplicationCustomizer.manifest.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-extension-manifest.schema.json",
+
+  "id": "abc3361f-bb2d-491f-aba3-cd51c19a299b",
+  "alias": "MegaMenuApplicationCustomizer",
+  "componentType": "Extension",
+  "extensionType": "ApplicationCustomizer",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false
+}
--- a/lib/extensions/megaMenu/MegaMenuRenderer.d.ts
+++ b/lib/extensions/megaMenu/MegaMenuRenderer.d.ts
@@ -0,0 +1,28 @@
+import { ApplicationCustomizerContext } from '@microsoft/sp-application-base';
+import { IMenuItem } from '../../services/IMenuItem';
+import { IMegaMenuApplicationCustomizerProperties } from './MegaMenuApplicationCustomizer';
+export declare class MegaMenuRenderer {
+    private context;
+    private menuItems;
+    private updateCallback;
+    private _settingsPanel?;
+    constructor(context: ApplicationCustomizerContext, menuItems: IMenuItem[], updateCallback: (data: IMegaMenuApplicationCustomizerProperties) => void);
+    render(container: HTMLElement): void;
+    private createSettingsItem();
+    private openSettings();
+    private createTopLevelItem(item);
+    private createTopLevelElement(item);
+    private createMegaMenu(parentItem);
+    private createCategorySection(item);
+    private attachEventListeners();
+    private attachKeyboardNavigation(heading, megaMenu);
+    private attachMouseEvents(heading, megaMenu);
+    private attachFocusManagement(heading, megaMenu);
+    private attachGlobalKeyboardNavigation();
+    private openMegaMenu(trigger, menu);
+    private closeMegaMenu(trigger, menu);
+    private toggleMegaMenu(trigger, menu);
+    private closeAllMegaMenus();
+    private focusFirstLink(megaMenu);
+    private createScreenReaderAnnouncer();
+}
--- a/lib/extensions/megaMenu/MegaMenuRenderer.js
+++ b/lib/extensions/megaMenu/MegaMenuRenderer.js
@@ -0,0 +1,372 @@
+// tslint:disable:max-line-length
+// tslint:disable:match-default-export-name
+// tslint:disable:typedef
+// tslint:disable:variable-name
+import { SPPermission } from '@microsoft/sp-page-context';
+import { MegaMenuSettingsPanel } from './MegaMenuSettings';
+var MegaMenuRenderer = (function () {
+    function MegaMenuRenderer(context, menuItems, updateCallback) {
+        this.context = context;
+        this.menuItems = menuItems;
+        this.updateCallback = updateCallback;
+    }
+    MegaMenuRenderer.prototype.render = function (container) {
+        var _this = this;
+        // Clear any existing content
+        container.innerHTML = '';
+        container.id = 'CustomNavigation';
+        // Create the main nav element
+        var nav = document.createElement('nav');
+        nav.id = 'Mega-Menu';
+        nav.className = 'mega-menu-main';
+        nav.setAttribute('role', 'navigation');
+        nav.setAttribute('aria-label', 'Hauptnavigation');
+        // Create the top-level menubar
+        var topLevelUl = document.createElement('ul');
+        topLevelUl.setAttribute('role', 'menubar');
+        // Process each top-level menu item
+        this.menuItems.forEach(function (topLevelItem) {
+            var topLevelLi = _this.createTopLevelItem(topLevelItem);
+            topLevelUl.appendChild(topLevelLi);
+        });
+        // Only if current user has ManageWeb permissions in this website can they access the settings
+        if (this.context.pageContext.web.permissions.hasPermission(SPPermission.manageWeb)) {
+            topLevelUl.appendChild(this.createSettingsItem());
+        }
+        nav.appendChild(topLevelUl);
+        container.appendChild(nav);
+        // Attach accessibility event listeners after rendering
+        this.attachEventListeners();
+        this.createScreenReaderAnnouncer();
+    };
+    MegaMenuRenderer.prototype.createSettingsItem = function () {
+        var _this = this;
+        var li = document.createElement('li');
+        li.setAttribute('role', 'none');
+        // Verwenden eines Links-ähnlichen Buttons damit Styling identisch zu Top-Level Items ist
+        var btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'menu-item-link menu-item-settings'; // reuse same base styles
+        btn.setAttribute('role', 'menuitem');
+        btn.setAttribute('tabindex', '0');
+        btn.setAttribute('aria-haspopup', 'false');
+        btn.setAttribute('aria-label', 'Einstellungen');
+        btn.title = 'Einstellungen';
+        // Nur EIN Icon: Wenn Fabric Icons geladen sind, zeigt ms-Icon das Symbol. Fallback via aria-label für Screenreader
+        var icon = document.createElement('span');
+        icon.className = 'ms-Icon ms-Icon--Settings menu-item-settings__icon';
+        icon.setAttribute('aria-hidden', 'true');
+        btn.appendChild(icon);
+        btn.addEventListener('click', function () { return _this.openSettings(); });
+        btn.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                _this.openSettings();
+            }
+        });
+        li.appendChild(btn);
+        return li;
+    };
+    MegaMenuRenderer.prototype.openSettings = function () {
+        if (!this._settingsPanel) {
+            this._settingsPanel = new MegaMenuSettingsPanel(this.context, this.updateCallback);
+        }
+        this._settingsPanel.open();
+    };
+    // Panel logic moved to MegaMenuSettingsPanel
+    MegaMenuRenderer.prototype.createTopLevelItem = function (item) {
+        var li = document.createElement('li');
+        li.setAttribute('role', 'none');
+        // Create the top-level element (link or span)
+        var topElement = this.createTopLevelElement(item);
+        li.appendChild(topElement);
+        // If the item has children, create the mega menu
+        if (item.hasChildren() && item.items && item.items.length > 0) {
+            var megaMenu = this.createMegaMenu(item);
+            li.appendChild(megaMenu);
+        }
+        return li;
+    };
+    MegaMenuRenderer.prototype.createTopLevelElement = function (item) {
+        var element;
+        if (item.url) {
+            // Create as link
+            element = document.createElement('a');
+            element.href = item.url;
+            element.className = 'menu-item-link';
+        }
+        else {
+            // Create as span (no link)
+            element = document.createElement('span');
+            element.className = 'menu-item-text';
+            element.setAttribute('tabindex', '0');
+        }
+        element.setAttribute('role', 'menuitem');
+        element.setAttribute('aria-haspopup', 'true');
+        element.setAttribute('aria-expanded', 'false');
+        element.textContent = item.label;
+        if (item.hoverText) {
+            element.title = item.hoverText;
+        }
+        return element;
+    };
+    MegaMenuRenderer.prototype.createMegaMenu = function (parentItem) {
+        var _this = this;
+        var megaMenuDiv = document.createElement('div');
+        megaMenuDiv.className = 'mega-menu';
+        megaMenuDiv.setAttribute('role', 'menu');
+        megaMenuDiv.setAttribute('aria-label', parentItem.label + " Unterkategorien");
+        var gridDiv = document.createElement('div');
+        gridDiv.className = 'mega-menu-grid';
+        // Process second-level items (categories)
+        if (parentItem.items) {
+            parentItem.items.forEach(function (secondLevelItem) {
+                var categoryDiv = _this.createCategorySection(secondLevelItem);
+                gridDiv.appendChild(categoryDiv);
+            });
+        }
+        megaMenuDiv.appendChild(gridDiv);
+        return megaMenuDiv;
+    };
+    MegaMenuRenderer.prototype.createCategorySection = function (item) {
+        var categoryDiv = document.createElement('div');
+        categoryDiv.className = 'mega-menu-category';
+        // Create the category header (h3)
+        var h3 = document.createElement('h3');
+        if (item.url) {
+            // Category header as link
+            var link = document.createElement('a');
+            link.href = item.url;
+            link.textContent = item.label;
+            if (item.hoverText) {
+                link.title = item.hoverText;
+            }
+            h3.appendChild(link);
+        }
+        else {
+            // Category header as span (no link)
+            var span = document.createElement('span');
+            span.textContent = item.label;
+            if (item.hoverText) {
+                span.title = item.hoverText;
+            }
+            h3.appendChild(span);
+        }
+        categoryDiv.appendChild(h3);
+        // Create the third-level items list if they exist
+        if (item.hasChildren() && item.items && item.items.length > 0) {
+            var ul_1 = document.createElement('ul');
+            item.items.forEach(function (thirdLevelItem) {
+                var li = document.createElement('li');
+                var link = document.createElement('a');
+                link.href = thirdLevelItem.url || '#';
+                link.textContent = thirdLevelItem.label;
+                if (thirdLevelItem.hoverText) {
+                    link.title = thirdLevelItem.hoverText;
+                }
+                li.appendChild(link);
+                ul_1.appendChild(li);
+            });
+            categoryDiv.appendChild(ul_1);
+        }
+        return categoryDiv;
+    };
+    MegaMenuRenderer.prototype.attachEventListeners = function () {
+        var headings = document.querySelectorAll('#Mega-Menu > ul > li > a, #Mega-Menu > ul > li > span[role="menuitem"]');
+        for (var i = 0; i < headings.length; i++) {
+            var heading = headings[i];
+            var megaMenu = heading.nextElementSibling;
+            if (megaMenu && megaMenu.classList.contains('mega-menu')) {
+                this.attachKeyboardNavigation(heading, megaMenu);
+                this.attachMouseEvents(heading, megaMenu);
+                this.attachFocusManagement(heading, megaMenu);
+            }
+        }
+        // Global keyboard navigation
+        this.attachGlobalKeyboardNavigation();
+    };
+    MegaMenuRenderer.prototype.attachKeyboardNavigation = function (heading, megaMenu) {
+        var _this = this;
+        heading.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter') {
+                // Enter: Navigation (nur bei Links ohne Mega-Menu-Override)
+                if (heading.tagName === 'A') {
+                    // Lasse normale Link-Navigation zu (KEIN preventDefault!)
+                    return;
+                }
+                else {
+                    // Bei span: Toggle Menu
+                    e.preventDefault();
+                    _this.toggleMegaMenu(heading, megaMenu);
+                }
+            }
+            else if (e.key === ' ') {
+                // Space: Toggle Dropdown (immer)
+                e.preventDefault();
+                _this.toggleMegaMenu(heading, megaMenu);
+            }
+            else if (e.key === 'ArrowDown') {
+                // Pfeil runter: Menü öffnen + erster Link
+                e.preventDefault();
+                _this.openMegaMenu(heading, megaMenu);
+                _this.focusFirstLink(megaMenu);
+            }
+            else if (e.key === 'ArrowUp') {
+                // Pfeil hoch: Menü schließen
+                e.preventDefault();
+                _this.closeMegaMenu(heading, megaMenu);
+            }
+            else if (e.key === 'Escape') {
+                // Escape: Menü schließen
+                e.preventDefault();
+                _this.closeMegaMenu(heading, megaMenu);
+                heading.focus();
+            }
+        });
+        // Click Event für Top-Level Links - NORMALE Navigation erlauben
+        if (heading.tagName === 'A') {
+            heading.addEventListener('click', function (e) {
+                // Links sollen normal navigieren, nicht das Mega-Menu toglen
+                // Wenn der User das Menu öffnen will, soll er Space oder Pfeil↓ nutzen
+                console.log('Link geklickt:', heading.href);
+                // KEIN preventDefault() - normale Link-Navigation
+            });
+        }
+        // Focus Management - KEIN automatisches Öffnen oder Schließen
+        heading.addEventListener('focus', function () {
+            console.log('Focus auf:', heading.textContent);
+            // Einfach nur fokussiert - keine automatischen Aktionen!
+        });
+    };
+    MegaMenuRenderer.prototype.attachMouseEvents = function (heading, megaMenu) {
+        var _this = this;
+        var parentLi = heading.parentElement;
+        parentLi.addEventListener('mouseenter', function () {
+            _this.openMegaMenu(heading, megaMenu);
+        });
+        parentLi.addEventListener('mouseleave', function () {
+            _this.closeMegaMenu(heading, megaMenu);
+        });
+    };
+    MegaMenuRenderer.prototype.attachFocusManagement = function (heading, megaMenu) {
+        var _this = this;
+        // Focus-Verlust-Behandlung - vereinfacht
+        megaMenu.addEventListener('focusout', function (e) {
+            // Kurz warten, um zu prüfen ob Focus innerhalb des Mega-Menus bleibt
+            setTimeout(function () {
+                var focusedElement = document.activeElement;
+                var isInsideThisMenu = megaMenu.contains(focusedElement);
+                var isOnThisTrigger = focusedElement === heading;
+                var isInAnyMegaMenu = focusedElement.closest('.mega-menu');
+                var isOnAnyTopLevel = focusedElement.closest('#Mega-Menu > ul > li > a, #Mega-Menu > ul > li > span');
+                // Nur schließen wenn Focus komplett außerhalb der Navigation ist
+                if (!isInsideThisMenu && !isOnThisTrigger && !isInAnyMegaMenu && !isOnAnyTopLevel) {
+                    console.log('Schließe Menu wegen Focus-Verlust');
+                    _this.closeMegaMenu(heading, megaMenu);
+                }
+            }, 150);
+        });
+    };
+    MegaMenuRenderer.prototype.attachGlobalKeyboardNavigation = function () {
+        var _this = this;
+        document.addEventListener('keydown', function (e) {
+            var activeElement = document.activeElement;
+            if (e.key === 'Escape') {
+                var openMenu = document.querySelector('.mega-menu[aria-expanded="true"]');
+                if (openMenu) {
+                    var triggerLink = openMenu.previousElementSibling;
+                    _this.closeMegaMenu(triggerLink, openMenu);
+                    triggerLink.focus();
+                }
+            }
+            // Tab-Navigation: Nur bei spezifischen Übergängen eingreifen
+            if (e.key === 'Tab') {
+                // Von Top-Level zum ersten Link im offenen Menu
+                if (!e.shiftKey) {
+                    var currentTopLevel = activeElement.closest('#Mega-Menu > ul > li > a, #Mega-Menu > ul > li > span');
+                    if (currentTopLevel) {
+                        var parentLi = currentTopLevel.closest('li');
+                        var megaMenu = parentLi.querySelector('.mega-menu.js-open');
+                        if (megaMenu) {
+                            // Nur eingreifen wenn wir vom Trigger weg-tabben
+                            e.preventDefault();
+                            var firstLink = megaMenu.querySelector('a');
+                            if (firstLink) {
+                                firstLink.focus();
+                            }
+                            return;
+                        }
+                    }
+                }
+                // Shift+Tab: Vom ersten Link im Menu zurück zum Trigger
+                if (e.shiftKey) {
+                    var megaMenu = activeElement.closest('.mega-menu');
+                    if (megaMenu && megaMenu.classList.contains('js-open')) {
+                        var allLinksInMenu = megaMenu.querySelectorAll('a');
+                        var firstLinkInMenu = allLinksInMenu[0];
+                        // Nur eingreifen wenn wir beim ersten Link sind
+                        if (activeElement === firstLinkInMenu) {
+                            e.preventDefault();
+                            var triggerElement = megaMenu.previousElementSibling;
+                            triggerElement.focus();
+                            return;
+                        }
+                    }
+                }
+                // Ansonsten: Normale Tab-Navigation nicht unterbrechen!
+            }
+        });
+    };
+    MegaMenuRenderer.prototype.openMegaMenu = function (trigger, menu) {
+        trigger.setAttribute('aria-expanded', 'true');
+        menu.setAttribute('aria-expanded', 'true');
+        menu.classList.add('js-open');
+        console.log('Menu geöffnet:', trigger.textContent);
+    };
+    MegaMenuRenderer.prototype.closeMegaMenu = function (trigger, menu) {
+        trigger.setAttribute('aria-expanded', 'false');
+        menu.setAttribute('aria-expanded', 'false');
+        menu.classList.remove('js-open');
+        console.log('Menu geschlossen:', trigger.textContent);
+    };
+    MegaMenuRenderer.prototype.toggleMegaMenu = function (trigger, menu) {
+        var isOpen = trigger.getAttribute('aria-expanded') === 'true';
+        if (isOpen) {
+            this.closeMegaMenu(trigger, menu);
+        }
+        else {
+            this.closeAllMegaMenus();
+            this.openMegaMenu(trigger, menu);
+        }
+    };
+    MegaMenuRenderer.prototype.closeAllMegaMenus = function () {
+        var allTriggers = document.querySelectorAll('#Mega-Menu > ul > li > a[aria-expanded="true"], #Mega-Menu > ul > li > span[aria-expanded="true"]');
+        for (var i = 0; i < allTriggers.length; i++) {
+            var trigger = allTriggers[i];
+            var menu = trigger.nextElementSibling;
+            if (menu) {
+                this.closeMegaMenu(trigger, menu);
+            }
+        }
+    };
+    // removed unused closeOtherMegaMenus (was previously declared but not used)
+    MegaMenuRenderer.prototype.focusFirstLink = function (megaMenu) {
+        var firstLink = megaMenu.querySelector('a');
+        if (firstLink) {
+            firstLink.focus();
+        }
+    };
+    MegaMenuRenderer.prototype.createScreenReaderAnnouncer = function () {
+        // Screenreader-Ankündigungen
+        var srAnnouncer = document.createElement('div');
+        srAnnouncer.setAttribute('aria-live', 'polite');
+        srAnnouncer.setAttribute('aria-atomic', 'true');
+        srAnnouncer.className = 'sr-only';
+        document.body.appendChild(srAnnouncer);
+        console.log('Screenreader-Ankündigungen sind jetzt bereit');
+    };
+    return MegaMenuRenderer;
+}());
+export { MegaMenuRenderer };
+
+//# sourceMappingURL=MegaMenuRenderer.js.map
--- a/lib/extensions/megaMenu/MegaMenuRenderer.js.map
+++ b/lib/extensions/megaMenu/MegaMenuRenderer.js.map
--- a/lib/extensions/megaMenu/MegaMenuSettings.d.ts
+++ b/lib/extensions/megaMenu/MegaMenuSettings.d.ts
@@ -0,0 +1,25 @@
+import { ApplicationCustomizerContext } from '@microsoft/sp-application-base';
+import { IMegaMenuApplicationCustomizerProperties } from './MegaMenuApplicationCustomizer';
+export declare class MegaMenuSettingsPanel {
+    private context;
+    private dataUpdated;
+    private _service;
+    private _ucaId;
+    private _panelElement;
+    private _overlayElement;
+    constructor(context: ApplicationCustomizerContext, dataUpdated: (data: IMegaMenuApplicationCustomizerProperties) => void);
+    open(): Promise<void>;
+    close(): void;
+    private readApplicationCustomizerProps();
+    private saveApplicationCustomizerProps(componentProps);
+    private _createPanel(props);
+    private _getMarkup(termSet, cssUrl);
+    private _save();
+    /**
+     * Hält den Fokus innerhalb des Settings-Panels gefangen (Focus Trapping).
+     * Wichtig für Accessibility: Verhindert, dass Tab-Navigation aus dem modalen Dialog herausführt.
+     * Bei Tab am letzten Element → springt zum ersten, bei Shift+Tab am ersten → springt zum letzten.
+     */
+    private _trapFocus(e);
+    private _escape(value);
+}
--- a/lib/extensions/megaMenu/MegaMenuSettings.js
+++ b/lib/extensions/megaMenu/MegaMenuSettings.js
@@ -0,0 +1,223 @@
+// tslint:disable:max-line-length export-name
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [0, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { UserCustomActionMegaMenuId } from './MegaMenuApplicationCustomizer';
+import { UserCustomActionService } from '../../services/UserCustomActionService/UserCustomActionService';
+import { UserCustomActionScope } from '../../services/UserCustomActionService/UserCustomActionScope';
+var MegaMenuSettingsPanel = (function () {
+    function MegaMenuSettingsPanel(context, dataUpdated) {
+        this.context = context;
+        this.dataUpdated = dataUpdated;
+        this._panelElement = undefined;
+        this._overlayElement = undefined;
+        this._service = new UserCustomActionService(this.context);
+    }
+    MegaMenuSettingsPanel.prototype.open = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var currentProps;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this._panelElement) {
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, this.readApplicationCustomizerProps()];
+                    case 1:
+                        currentProps = _a.sent();
+                        this._createPanel(currentProps);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    MegaMenuSettingsPanel.prototype.close = function () {
+        if (this._panelElement) {
+            this._panelElement.remove();
+            this._panelElement = undefined;
+        }
+        if (this._overlayElement) {
+            this._overlayElement.remove();
+            this._overlayElement = undefined;
+        }
+        // Fokus entfernen (kein sichtbarer Fokus-Rahmen nach Dialog-Schließung)
+        document.body.focus();
+        document.body.blur();
+    };
+    MegaMenuSettingsPanel.prototype.readApplicationCustomizerProps = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var ucas, candidates, uca;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this._service.getUserCustomActions(UserCustomActionScope.Site)];
+                    case 1:
+                        ucas = _a.sent();
+                        candidates = ucas.filter(function (uca) { return uca.ClientSideComponentId === UserCustomActionMegaMenuId; });
+                        if (candidates.length) {
+                            uca = candidates[0];
+                            this._ucaId = uca.Id;
+                            return [2 /*return*/, JSON.parse(uca.ClientSideComponentProperties)];
+                        }
+                        else {
+                            console.error('UserCustomAction für das Megamenü nicht gefunden. Alles ist sinnlos.');
+                            return [2 /*return*/, {
+                                    termSetName: '',
+                                    cssUrl: ''
+                                }];
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    MegaMenuSettingsPanel.prototype.saveApplicationCustomizerProps = function (componentProps) {
+        return __awaiter(this, void 0, void 0, function () {
+            var newUserCustomActionsProperty, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        newUserCustomActionsProperty = {
+                            ClientSideComponentProperties: JSON.stringify(componentProps)
+                        };
+                        return [4 /*yield*/, this._service.updateUserCustomAction(UserCustomActionScope.Site, this._ucaId, newUserCustomActionsProperty)];
+                    case 1:
+                        _a.sent();
+                        this.dataUpdated(componentProps);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        e_1 = _a.sent();
+                        console.error(e_1);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    MegaMenuSettingsPanel.prototype._createPanel = function (props) {
+        var _this = this;
+        var overlay = document.createElement('div');
+        overlay.className = 'mm-settings-overlay';
+        overlay.tabIndex = -1;
+        overlay.onclick = function () { return _this.close(); };
+        this._overlayElement = overlay;
+        var panel = document.createElement('div');
+        panel.className = 'mm-settings-panel';
+        panel.setAttribute('role', 'dialog');
+        panel.setAttribute('aria-modal', 'true');
+        panel.setAttribute('aria-label', 'MegaMenu Einstellungen');
+        panel.innerHTML = this._getMarkup(props.termSetName, props.cssUrl);
+        this._panelElement = panel;
+        document.body.appendChild(overlay);
+        document.body.appendChild(panel);
+        var closeBtn = panel.querySelector('.mm-settings-close');
+        var cancelBtn = panel.querySelector('.mm-settings-cancel');
+        var saveBtn = panel.querySelector('.mm-settings-save');
+        var firstInput = panel.querySelector('#mm-setting-termset');
+        if (closeBtn) {
+            closeBtn.onclick = function () { return _this.close(); };
+        }
+        if (cancelBtn) {
+            cancelBtn.onclick = function () { return _this.close(); };
+        }
+        if (saveBtn) {
+            saveBtn.onclick = function () { return _this._save(); };
+        }
+        panel.addEventListener('keydown', function (e) {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                _this.close();
+            }
+            else if (e.key === 'Tab') {
+                _this._trapFocus(e);
+            }
+        });
+        setTimeout(function () { if (firstInput) {
+            firstInput.focus();
+        } }, 0);
+    };
+    MegaMenuSettingsPanel.prototype._getMarkup = function (termSet, cssUrl) {
+        return "<div class='mm-settings-header'>\n            <h2 class='mm-settings-title'>Einstellungen</h2>\n            <button type='button' class='mm-settings-close' aria-label='Schlie\u00DFen'>\u00D7</button>\n            </div>\n            <div class='mm-settings-body'>\n              <div class='mm-settings-field'>\n                <label for='mm-setting-termset'>Name des Navigations-Termsets</label>\n                <input id='mm-setting-termset' type='text' value='" + this._escape(termSet) + "' />\n              </div>\n              <div class='mm-settings-field'>\n                <label for='mm-setting-css'>Pfad zu zus\u00E4tzlicher CSS-Datei</label>\n                <input id='mm-setting-css' type='text' value='" + this._escape(cssUrl) + "' />\n              </div>\n            </div>\n            <div class='mm-settings-footer'>\n              <button type='button' class='mm-settings-save ms-Button ms-Button--primary'><span>Speichern</span></button>\n              <button type='button' class='mm-settings-cancel ms-Button'><span>Abbrechen</span></button>\n            </div>";
+    };
+    MegaMenuSettingsPanel.prototype._save = function () {
+        if (!this._panelElement) {
+            return;
+        }
+        var termSetInput = this._panelElement.querySelector('#mm-setting-termset');
+        var cssInput = this._panelElement.querySelector('#mm-setting-css');
+        this.saveApplicationCustomizerProps({
+            termSetName: termSetInput && termSetInput.value ? termSetInput.value : '',
+            cssUrl: cssInput && cssInput.value ? cssInput.value : ''
+        });
+        this.close();
+    };
+    /**
+     * Hält den Fokus innerhalb des Settings-Panels gefangen (Focus Trapping).
+     * Wichtig für Accessibility: Verhindert, dass Tab-Navigation aus dem modalen Dialog herausführt.
+     * Bei Tab am letzten Element → springt zum ersten, bei Shift+Tab am ersten → springt zum letzten.
+     */
+    MegaMenuSettingsPanel.prototype._trapFocus = function (e) {
+        if (!this._panelElement) {
+            return;
+        }
+        var focusable = this._panelElement.querySelectorAll('button, input');
+        if (!focusable || focusable.length === 0) {
+            return;
+        }
+        var first = focusable[0];
+        var last = focusable[focusable.length - 1];
+        var active = document.activeElement;
+        if (e.shiftKey && active === first) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && active === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    };
+    MegaMenuSettingsPanel.prototype._escape = function (value) {
+        if (value) {
+            return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        }
+        else {
+            return '';
+        }
+    };
+    return MegaMenuSettingsPanel;
+}());
+export { MegaMenuSettingsPanel };
+
+//# sourceMappingURL=MegaMenuSettings.js.map
--- a/lib/extensions/megaMenu/MegaMenuSettings.js.map
+++ b/lib/extensions/megaMenu/MegaMenuSettings.js.map
--- a/lib/extensions/megaMenu/loc/en-us.js
+++ b/lib/extensions/megaMenu/loc/en-us.js
@@ -0,0 +1,5 @@
+define([], function() {
+  return {
+    "Title": "MegaMenuApplicationCustomizer"
+  }
+});
--- a/lib/index.d.ts
+++ b/lib/index.d.ts
@@ -0,0 +1,4 @@
+export { TaxonomyNavigationService } from './services/TaxonomyNavigationService';
+export { MegaMenuRenderer } from './extensions/megaMenu/MegaMenuRenderer';
+export { UserCustomActionService } from './services/UserCustomActionService/UserCustomActionService';
+export { UserCustomActionScope } from './services/UserCustomActionService/UserCustomActionScope';
--- a/lib/index.js
+++ b/lib/index.js
@@ -0,0 +1,17 @@
+// tslint:disable:max-line-length no-any
+// A file is required to be in the root of the /src directory by the TypeScript compiler
+// Export services for classic SharePoint usage
+export { TaxonomyNavigationService } from './services/TaxonomyNavigationService';
+export { MegaMenuRenderer } from './extensions/megaMenu/MegaMenuRenderer';
+export { UserCustomActionService } from './services/UserCustomActionService/UserCustomActionService';
+export { UserCustomActionScope } from './services/UserCustomActionService/UserCustomActionScope';
+if (typeof window !== 'undefined') {
+    window.__megaMenuServices = {
+        TaxonomyNavigationService: require('./services/TaxonomyNavigationService').TaxonomyNavigationService,
+        MegaMenuRenderer: require('./extensions/megaMenu/MegaMenuRenderer').MegaMenuRenderer,
+        UserCustomActionService: require('./services/UserCustomActionService/UserCustomActionService').UserCustomActionService,
+        UserCustomActionScope: require('./services/UserCustomActionService/UserCustomActionScope').UserCustomActionScope
+    };
+}
+
+//# sourceMappingURL=index.js.map
--- a/lib/index.js.map
+++ b/lib/index.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,wCAAwC;AACxC,wFAAwF;AAExF,+CAA+C;AAC/C,OAAO,EAAE,yBAAyB,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,4DAA4D,CAAC;AACrG,OAAO,EAAE,qBAAqB,EAAE,MAAM,0DAA0D,CAAC;AAKjG,EAAE,CAAC,CAAC,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC;IAChC,MAAM,CAAC,kBAAkB,GAAG;QACxB,yBAAyB,EAAE,OAAO,CAAC,sCAAsC,CAAC,CAAC,yBAAyB;QACpG,gBAAgB,EAAE,OAAO,CAAC,wCAAwC,CAAC,CAAC,gBAAgB;QACpF,uBAAuB,EAAE,OAAO,CAAC,4DAA4D,CAAC,CAAC,uBAAuB;QACtH,qBAAqB,EAAE,OAAO,CAAC,0DAA0D,CAAC,CAAC,qBAAqB;KACnH,CAAC;AACN,CAAC","file":"index.js","sourcesContent":["// tslint:disable:max-line-length no-any\r\n// A file is required to be in the root of the /src directory by the TypeScript compiler\r\n\r\n// Export services for classic SharePoint usage\r\nexport { TaxonomyNavigationService } from './services/TaxonomyNavigationService';\r\nexport { MegaMenuRenderer } from './extensions/megaMenu/MegaMenuRenderer';\r\nexport { UserCustomActionService } from './services/UserCustomActionService/UserCustomActionService';\r\nexport { UserCustomActionScope } from './services/UserCustomActionService/UserCustomActionScope';\r\n\r\n// Expose services globally for classic JavaScript consumption\r\ndeclare var window: any;\r\n\r\nif (typeof window !== 'undefined') {\r\n    window.__megaMenuServices = {\r\n        TaxonomyNavigationService: require('./services/TaxonomyNavigationService').TaxonomyNavigationService,\r\n        MegaMenuRenderer: require('./extensions/megaMenu/MegaMenuRenderer').MegaMenuRenderer,\r\n        UserCustomActionService: require('./services/UserCustomActionService/UserCustomActionService').UserCustomActionService,\r\n        UserCustomActionScope: require('./services/UserCustomActionService/UserCustomActionScope').UserCustomActionScope\r\n    };\r\n}\r\n"],"sourceRoot":"..\\src"}
--- a/lib/services/IMenuItem.d.ts
+++ b/lib/services/IMenuItem.d.ts
@@ -0,0 +1,10 @@
+export interface IMenuItem {
+    id: string;
+    label: string;
+    icon?: string;
+    hoverText: string;
+    url?: string;
+    pathDepth: number;
+    items?: IMenuItem[];
+    hasChildren: () => boolean;
+}
--- a/lib/services/IMenuItem.js
+++ b/lib/services/IMenuItem.js
@@ -0,0 +1,3 @@
+
+
+//# sourceMappingURL=IMenuItem.js.map
--- a/lib/services/IMenuItem.js.map
+++ b/lib/services/IMenuItem.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"services/IMenuItem.js","sourcesContent":[],"sourceRoot":"..\\..\\src"}
--- a/lib/services/IPickerTerm.d.ts
+++ b/lib/services/IPickerTerm.d.ts
@@ -0,0 +1,9 @@
+export interface IPickerTerm {
+    name: string;
+    key: string;
+    path: string;
+    termSet: string;
+    termSetName?: string;
+}
+export interface IPickerTerms extends Array<IPickerTerm> {
+}
--- a/lib/services/IPickerTerm.js
+++ b/lib/services/IPickerTerm.js
@@ -0,0 +1,3 @@
+
+
+//# sourceMappingURL=IPickerTerm.js.map
--- a/lib/services/IPickerTerm.js.map
+++ b/lib/services/IPickerTerm.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"services/IPickerTerm.js","sourcesContent":[],"sourceRoot":"..\\..\\src"}
--- a/lib/services/ISPTermStorePickerService.d.ts
+++ b/lib/services/ISPTermStorePickerService.d.ts
@@ -0,0 +1,84 @@
+/**
+ * Interfaces for Term store, groups and term sets
+ * This code is a copy from the library @pnp/sp-dev-fx-controls-react
+ */
+export interface ITermStore {
+    _ObjectType_: string;
+    _ObjectIdentity_: string;
+    Id: string;
+    Name: string;
+    Groups: IGroups;
+}
+export interface IGroups {
+    _ObjectType_: string;
+    _Child_Items_: IGroup[];
+}
+export interface IGroup {
+    _ObjectType_: string;
+    _ObjectIdentity_: string;
+    TermSets: ITermSets;
+    Id: string;
+    Name: string;
+    IsSystemGroup: boolean;
+}
+export interface ITermSets {
+    _ObjectType_: string;
+    _Child_Items_: ITermSet[];
+}
+export interface ITermSet {
+    _ObjectType_: string;
+    _ObjectIdentity_: string;
+    Id: string;
+    CustomSortOrder?: string;
+    Name: string;
+    Description: string;
+    Names: ITermSetNames;
+    Terms?: ITerm[];
+}
+export interface ITermSetMinimal {
+    _ObjectType_?: string;
+    _ObjectIdentity_?: string;
+    Id: string;
+    Name: string;
+}
+export interface ITermSetNames {
+    [locale: string]: string;
+}
+/**
+ * Interfaces for the terms
+ */
+export interface ITerms {
+    _ObjectType_: string;
+    _Child_Items_: ITerm[];
+}
+/**
+ * Term
+ */
+export interface ITerm {
+    _ObjectType_: string;
+    _ObjectIdentity_: string;
+    Id: string;
+    Name: string;
+    Description: string;
+    IsDeprecated: boolean;
+    IsAvailableForTagging: boolean;
+    IsRoot: boolean;
+    PathOfTerm: string;
+    TermSet: ITermSetMinimal;
+    CustomSortOrderIndex?: number;
+    PathDepth?: number;
+    ParentId?: string;
+    TermsCount?: number;
+    LocalCustomProperties?: {
+        [property: string]: any;
+    };
+}
+export interface ISuggestTerm {
+    Id: string;
+    DefaultLabel: string;
+    Description: string;
+    IsKeyword: boolean;
+    IsSynonym: boolean;
+    Paths: Array<string>;
+    Synonyms: string;
+}
--- a/lib/services/ISPTermStorePickerService.js
+++ b/lib/services/ISPTermStorePickerService.js
@@ -0,0 +1,3 @@
+
+
+//# sourceMappingURL=ISPTermStorePickerService.js.map
--- a/lib/services/ISPTermStorePickerService.js.map
+++ b/lib/services/ISPTermStorePickerService.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"services/ISPTermStorePickerService.js","sourcesContent":[],"sourceRoot":"..\\..\\src"}
--- a/lib/services/ISPTermStorePickerServiceProps.d.ts
+++ b/lib/services/ISPTermStorePickerServiceProps.d.ts
@@ -0,0 +1,7 @@
+export interface ISPTermStorePickerServiceProps {
+    termsetNameOrID: string;
+    useSessionStorage: boolean;
+    hideDeprecatedTags: boolean;
+    hideTagsNotAvailableForTagging: boolean;
+    anchorId: string;
+}
--- a/lib/services/ISPTermStorePickerServiceProps.js
+++ b/lib/services/ISPTermStorePickerServiceProps.js
@@ -0,0 +1,3 @@
+
+
+//# sourceMappingURL=ISPTermStorePickerServiceProps.js.map
--- a/lib/services/ISPTermStorePickerServiceProps.js.map
+++ b/lib/services/ISPTermStorePickerServiceProps.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"services/ISPTermStorePickerServiceProps.js","sourcesContent":[],"sourceRoot":"..\\..\\src"}
--- a/lib/services/ITaxonomyNavigationService.d.ts
+++ b/lib/services/ITaxonomyNavigationService.d.ts
@@ -0,0 +1,4 @@
+import { IMenuItem } from './IMenuItem';
+export interface ITaxonomyNavigationService {
+    getMenuItems(): Promise<IMenuItem[]>;
+}
--- a/lib/services/ITaxonomyNavigationService.js
+++ b/lib/services/ITaxonomyNavigationService.js
@@ -0,0 +1,3 @@
+
+
+//# sourceMappingURL=ITaxonomyNavigationService.js.map
--- a/lib/services/ITaxonomyNavigationService.js.map
+++ b/lib/services/ITaxonomyNavigationService.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"services/ITaxonomyNavigationService.js","sourcesContent":[],"sourceRoot":"..\\..\\src"}
--- a/lib/services/ItemDictionary.d.ts
+++ b/lib/services/ItemDictionary.d.ts
@@ -0,0 +1,4 @@
+export declare class ItemDictionary<T> {
+    Get(key: string): T;
+    Add(key: string, value: T): void;
+}
--- a/lib/services/ItemDictionary.js
+++ b/lib/services/ItemDictionary.js
@@ -0,0 +1,14 @@
+var ItemDictionary = (function () {
+    function ItemDictionary() {
+    }
+    ItemDictionary.prototype.Get = function (key) {
+        return this[key];
+    };
+    ItemDictionary.prototype.Add = function (key, value) {
+        this[key] = value;
+    };
+    return ItemDictionary;
+}());
+export { ItemDictionary };
+
+//# sourceMappingURL=ItemDictionary.js.map
--- a/lib/services/ItemDictionary.js.map
+++ b/lib/services/ItemDictionary.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["services/ItemDictionary.ts"],"names":[],"mappings":"AAAA;IAAA;IAQA,CAAC;IAPU,4BAAG,GAAV,UAAW,GAAW;QAClB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrB,CAAC;IAEM,4BAAG,GAAV,UAAW,GAAW,EAAE,KAAQ;QAC5B,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;IACtB,CAAC;IACL,qBAAC;AAAD,CARA,AAQC,IAAA","file":"services/ItemDictionary.js","sourcesContent":["export class ItemDictionary<T> {\r\n    public Get(key: string): T {\r\n        return this[key];\r\n    }\r\n\r\n    public Add(key: string, value: T): void {\r\n        this[key] = value;\r\n    }\r\n}\r\n"],"sourceRoot":"..\\..\\src"}
--- a/lib/services/MenuItem.d.ts
+++ b/lib/services/MenuItem.d.ts
@@ -0,0 +1,14 @@
+import { IMenuItem } from './IMenuItem';
+import { ITerm } from './ISPTermStorePickerService';
+export declare class MenuItem implements IMenuItem {
+    level: number;
+    id: string;
+    label: string;
+    hoverText: string;
+    pathDepth: number;
+    url?: string;
+    items?: IMenuItem[];
+    constructor(term: ITerm, level: number, siteCollectionUrl?: string);
+    hasChildren(): boolean;
+    command(): void;
+}
--- a/lib/services/MenuItem.js
+++ b/lib/services/MenuItem.js
@@ -0,0 +1,29 @@
+// tslint:disable:no-any no-string-literal max-line-length
+var MenuItem = (function () {
+    function MenuItem(term, level, siteCollectionUrl) {
+        this.level = level;
+        this.id = term.Id;
+        this.label = term.Name;
+        this.hoverText = term.LocalCustomProperties['_Sys_Nav_HoverText'];
+        this.pathDepth = term.PathDepth;
+        var rawUrl = term.LocalCustomProperties['_Sys_Nav_SimpleLinkUrl'] || term.LocalCustomProperties['_Sys_Nav_TargetUrl'];
+        if (rawUrl) {
+            this.url = siteCollectionUrl && rawUrl.indexOf('~sitecollection') === 0
+                ? siteCollectionUrl + rawUrl.substring('~sitecollection'.length)
+                : rawUrl;
+        }
+        this.items = [];
+    }
+    MenuItem.prototype.hasChildren = function () {
+        return this.items && this.items.length > 0;
+    };
+    MenuItem.prototype.command = function () {
+        if (this.url) {
+            window.location.href = this.url;
+        }
+    };
+    return MenuItem;
+}());
+export { MenuItem };
+
+//# sourceMappingURL=MenuItem.js.map
--- a/lib/services/MenuItem.js.map
+++ b/lib/services/MenuItem.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["services/MenuItem.ts"],"names":[],"mappings":"AAAA,0DAA0D;AAK1D;IAQI,kBAAY,IAAW,EAAS,KAAa,EAAE,iBAA0B;QAAzC,UAAK,GAAL,KAAK,CAAQ;QACzC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,qBAAqB,CAAC,oBAAoB,CAAC,CAAC;QAClE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QAChC,IAAM,MAAM,GAAW,IAAI,CAAC,qBAAqB,CAAC,wBAAwB,CAAC,IAAI,IAAI,CAAC,qBAAqB,CAAC,oBAAoB,CAAC,CAAC;QAChI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;YACT,IAAI,CAAC,GAAG,GAAG,iBAAiB,IAAI,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC;kBACjE,iBAAiB,GAAG,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,MAAM,CAAC;kBAC9D,MAAM,CAAC;QACjB,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IACpB,CAAC;IAEM,8BAAW,GAAlB;QACI,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/C,CAAC;IAEM,0BAAO,GAAd;QACI,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;YACV,MAAc,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;QAC7C,CAAC;IACL,CAAC;IACL,eAAC;AAAD,CA/BA,AA+BC,IAAA","file":"services/MenuItem.js","sourcesContent":["// tslint:disable:no-any no-string-literal max-line-length\r\n\r\nimport { IMenuItem } from './IMenuItem';\r\nimport { ITerm } from './ISPTermStorePickerService';\r\n\r\nexport class MenuItem implements IMenuItem {\r\n    public id: string;\r\n    public label: string;\r\n    public hoverText: string;\r\n    public pathDepth: number;\r\n    public url?: string;\r\n    public items?: IMenuItem[];\r\n\r\n    constructor(term: ITerm, public level: number, siteCollectionUrl?: string) {\r\n        this.id = term.Id;\r\n        this.label = term.Name;\r\n        this.hoverText = term.LocalCustomProperties['_Sys_Nav_HoverText'];\r\n        this.pathDepth = term.PathDepth;\r\n        const rawUrl: string = term.LocalCustomProperties['_Sys_Nav_SimpleLinkUrl'] || term.LocalCustomProperties['_Sys_Nav_TargetUrl'];\r\n        if (rawUrl) {\r\n            this.url = siteCollectionUrl && rawUrl.indexOf('~sitecollection') === 0\r\n                ? siteCollectionUrl + rawUrl.substring('~sitecollection'.length)\r\n                : rawUrl;\r\n        }\r\n        this.items = [];\r\n    }\r\n\r\n    public hasChildren(): boolean {\r\n        return this.items && this.items.length > 0;\r\n    }\r\n\r\n    public command(): void {\r\n        if (this.url) {\r\n            (window as any).location.href = this.url;\r\n        }\r\n    }\r\n}\r\n"],"sourceRoot":"..\\..\\src"}
--- a/lib/services/MockTaxonomyNavigationService.d.ts
+++ b/lib/services/MockTaxonomyNavigationService.d.ts
@@ -0,0 +1,5 @@
+import { IMenuItem } from './IMenuItem';
+import { ITaxonomyNavigationService } from './ITaxonomyNavigationService';
+export default class MockTaxonomyNavigationService implements ITaxonomyNavigationService {
+    getMenuItems(): Promise<IMenuItem[]>;
+}
--- a/lib/services/MockTaxonomyNavigationService.js
+++ b/lib/services/MockTaxonomyNavigationService.js
@@ -0,0 +1,109 @@
+import * as uuid from 'uuid';
+var MockTaxonomyNavigationService = (function () {
+    function MockTaxonomyNavigationService() {
+    }
+    MockTaxonomyNavigationService.prototype.getMenuItems = function () {
+        return new Promise(function (resolve) {
+            resolve([
+                {
+                    id: uuid.v4(),
+                    label: 'Menu Item 1',
+                    url: 'https://www.bing.com',
+                    hoverText: 'Hover me!',
+                    pathDepth: 1,
+                    hasChildren: function () { return true; },
+                    items: [
+                        {
+                            id: uuid.v4(),
+                            label: 'Submenu Item 1',
+                            hoverText: 'Huch!',
+                            url: 'https://www.bing.com',
+                            pathDepth: 2,
+                            hasChildren: function () { return false; }
+                        },
+                        {
+                            id: uuid.v4(),
+                            label: 'Submenu Item 2',
+                            hoverText: 'Huch!',
+                            url: 'https://www.bing.com',
+                            pathDepth: 2,
+                            hasChildren: function () { return false; }
+                        }
+                    ]
+                },
+                {
+                    id: uuid.v4(),
+                    label: 'Menu Item 2',
+                    hoverText: 'Huch!',
+                    url: 'https://www.bing.com',
+                    pathDepth: 1,
+                    hasChildren: function () { return false; }
+                },
+                {
+                    id: uuid.v4(),
+                    label: 'Menu Item 3',
+                    hoverText: 'Huch!',
+                    url: 'https://www.bing.com',
+                    pathDepth: 1,
+                    hasChildren: function () { return true; },
+                    items: [
+                        {
+                            id: uuid.v4(),
+                            label: 'Submenu Item 1',
+                            hoverText: 'Huch!',
+                            url: 'https://www.bing.com',
+                            pathDepth: 2,
+                            hasChildren: function () { return false; }
+                        },
+                        {
+                            id: uuid.v4(),
+                            label: 'Submenu Item 2',
+                            hoverText: 'Huch!',
+                            url: 'https://www.bing.com',
+                            pathDepth: 2,
+                            hasChildren: function () { return true; },
+                            items: [
+                                {
+                                    id: uuid.v4(),
+                                    label: 'Submenu Item 1',
+                                    hoverText: 'Huch!',
+                                    url: 'https://www.bing.com',
+                                    pathDepth: 3,
+                                    hasChildren: function () { return false; }
+                                },
+                                {
+                                    id: uuid.v4(),
+                                    label: 'Submenu Item 2',
+                                    hoverText: 'Huch!',
+                                    url: 'https://www.bing.com',
+                                    pathDepth: 3,
+                                    hasChildren: function () { return false; }
+                                }
+                            ]
+                        },
+                        {
+                            id: uuid.v4(),
+                            label: 'Submenu Item 3',
+                            hoverText: 'Huch!',
+                            url: 'https://www.bing.com',
+                            pathDepth: 2,
+                            hasChildren: function () { return false; }
+                        },
+                        {
+                            id: uuid.v4(),
+                            label: 'Submenu Item 4',
+                            hoverText: 'Huch!',
+                            url: 'https://www.bing.com',
+                            pathDepth: 2,
+                            hasChildren: function () { return false; }
+                        }
+                    ]
+                }
+            ]);
+        });
+    };
+    return MockTaxonomyNavigationService;
+}());
+export default MockTaxonomyNavigationService;
+
+//# sourceMappingURL=MockTaxonomyNavigationService.js.map
--- a/lib/services/MockTaxonomyNavigationService.js.map
+++ b/lib/services/MockTaxonomyNavigationService.js.map
--- a/lib/services/SPTermStorePickerService.d.ts
+++ b/lib/services/SPTermStorePickerService.d.ts
@@ -0,0 +1,76 @@
+import { ITermStore, ITermSet } from './ISPTermStorePickerService';
+import { ISPTermStorePickerServiceProps } from './ISPTermStorePickerServiceProps';
+import { IPickerTerm } from './IPickerTerm';
+import { ApplicationCustomizerContext } from '@microsoft/sp-application-base';
+/**
+ * Service implementation to manage term stores in SharePoint
+ */
+export default class SPTermStorePickerService {
+    private props;
+    private context;
+    private clientServiceUrl;
+    private suggestionServiceUrl;
+    /**
+     * Service constructor
+     */
+    constructor(props: ISPTermStorePickerServiceProps, context: ApplicationCustomizerContext);
+    getTermLabels(termId: string): Promise<string[]>;
+    /**
+     * Gets the collection of term stores in the current SharePoint env
+     */
+    getTermStores(): Promise<ITermStore[]>;
+    /**
+     * Gets the current term set
+     */
+    getTermSet(): Promise<ITermSet>;
+    /**
+     * Retrieve all terms for the given term set
+     * @param termset
+     */
+    getAllTerms(termset: string, hideDeprecatedTags?: boolean, hideTagsNotAvailableForTagging?: boolean, useSessionStorage?: boolean): Promise<ITermSet>;
+    /**
+     * Retrieve all terms that starts with the searchText
+     * @param searchText
+     */
+    searchTermsByName(searchText: string): Promise<IPickerTerm[]>;
+    searchTermsByTermId(searchText: string, termId: string): Promise<IPickerTerm[]>;
+    /**
+     * Retrieve all terms for the given term set and anchorId
+     */
+    getAllTermsByAnchorId(termsetNameOrID: string, anchorId: string, hideDeprecatedTags?: boolean, hideTagsNotAvailableForTagging?: boolean, useSessionStorage?: boolean): Promise<IPickerTerm[]>;
+    /**
+     * Clean the Guid from the Web Service response
+     * @param guid
+     */
+    cleanGuid(guid: string): string;
+    /**
+      * Get the term set ID by its name
+      * @param termstore
+      * @param termset
+      */
+    private getTermSetId(termstore, termsetName);
+    private getTermsById(termId, useSessionStorage?);
+    private searchTermsBySearchText(terms, searchText);
+    /**
+       * Searches terms for the given term set
+       * @param searchText
+       * @param termsetId
+       */
+    private searchTermsByTermSet(searchText);
+    private isGuid(strGuid);
+    /**
+     * Sorting terms based on their path and depth
+     *
+     * @param terms
+     */
+    private sortTerms(terms);
+    /**
+     * Sort the terms by their path
+     *
+     * @param a term 2
+     * @param b term 2
+     */
+    private sortTermByPath(a, b);
+    private convertTermToPickerTerm(term);
+    private convertSuggestTermToPickerTerm(term);
+}
--- a/lib/services/SPTermStorePickerService.js
+++ b/lib/services/SPTermStorePickerService.js
@@ -0,0 +1,574 @@
+/* tslint:disable:no-null-keyword max-line-length typedef no-any no-string-literal variable-name */
+/**
+ * This code is a copy from the library @pnp/sp-dev-fx-controls-react
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [0, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { SPHttpClient } from '@microsoft/sp-http';
+import { findIndex } from '@microsoft/sp-lodash-subset';
+var EmptyGuid = '00000000-0000-0000-0000-000000000000';
+/**
+ * Service implementation to manage term stores in SharePoint
+ */
+var SPTermStorePickerService = (function () {
+    /**
+     * Service constructor
+     */
+    function SPTermStorePickerService(props, context) {
+        this.props = props;
+        this.context = context;
+        this.clientServiceUrl = this.context.pageContext.web.absoluteUrl + '/_vti_bin/client.svc/ProcessQuery';
+        this.suggestionServiceUrl = this.context.pageContext.web.absoluteUrl + '/_vti_bin/TaxonomyInternalService.json/GetSuggestions';
+    }
+    SPTermStorePickerService.prototype.getTermLabels = function (termId) {
+        return __awaiter(this, void 0, void 0, function () {
+            var result, data, reqHeaders, httpPostOptions, callResult, jsonResult, node, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        result = null;
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 4, , 5]);
+                        data = "<Request AddExpandoFieldTypeSuffix=\"true\" SchemaVersion=\"15.0.0.0\" LibraryVersion=\"16.0.0.0\" ApplicationName=\".NET Library\" xmlns=\"http://schemas.microsoft.com/sharepoint/clientquery/2009\"><Actions><ObjectPath Id=\"8\" ObjectPathId=\"7\" /><ObjectIdentityQuery Id=\"9\" ObjectPathId=\"7\" /><ObjectPath Id=\"11\" ObjectPathId=\"10\" /><ObjectIdentityQuery Id=\"12\" ObjectPathId=\"10\" /><ObjectPath Id=\"14\" ObjectPathId=\"13\" /><ObjectIdentityQuery Id=\"15\" ObjectPathId=\"13\" /><Query Id=\"16\" ObjectPathId=\"13\"><Query SelectAllProperties=\"false\"><Properties><Property Name=\"Labels\" SelectAll=\"true\"><Query SelectAllProperties=\"false\"><Properties /></Query></Property></Properties></Query></Query></Actions><ObjectPaths><StaticMethod Id=\"7\" Name=\"GetTaxonomySession\" TypeId=\"{981cbc68-9edc-4f8d-872f-71146fcbb84f}\" /><Method Id=\"10\" ParentId=\"7\" Name=\"GetDefaultKeywordsTermStore\" /><Method Id=\"13\" ParentId=\"10\" Name=\"GetTerm\"><Parameters><Parameter Type=\"Guid\">" + termId + "</Parameter></Parameters></Method></ObjectPaths></Request>";
+                        reqHeaders = new Headers();
+                        reqHeaders.append('accept', 'application/json');
+                        reqHeaders.append('content-type', 'application/xml');
+                        httpPostOptions = {
+                            headers: reqHeaders,
+                            body: data
+                        };
+                        return [4 /*yield*/, this.context.spHttpClient.post(this.clientServiceUrl, SPHttpClient.configurations.v1, httpPostOptions)];
+                    case 2:
+                        callResult = _a.sent();
+                        return [4 /*yield*/, callResult.json()];
+                    case 3:
+                        jsonResult = _a.sent();
+                        node = jsonResult.find(function (x) { return x._ObjectType_ === 'SP.Taxonomy.Term'; });
+                        if (node && node.Labels && node.Labels._Child_Items_) {
+                            result = node.Labels._Child_Items_.map(function (termLabel) { return termLabel.Value; });
+                        }
+                        return [3 /*break*/, 5];
+                    case 4:
+                        error_1 = _a.sent();
+                        result = null;
+                        console.log(error_1.message);
+                        return [3 /*break*/, 5];
+                    case 5: return [2 /*return*/, result];
+                }
+            });
+        });
+    };
+    /**
+     * Gets the collection of term stores in the current SharePoint env
+     */
+    SPTermStorePickerService.prototype.getTermStores = function () {
+        var _this = this;
+        // Retrieve the term store name, groups, and term sets
+        var data = '<Request AddExpandoFieldTypeSuffix="true" SchemaVersion="15.0.0.0" LibraryVersion="16.0.0.0" ApplicationName=".NET Library" xmlns="http://schemas.microsoft.com/sharepoint/clientquery/2009"><Actions><ObjectPath Id="2" ObjectPathId="1" /><ObjectIdentityQuery Id="3" ObjectPathId="1" /><ObjectPath Id="5" ObjectPathId="4" /><ObjectIdentityQuery Id="6" ObjectPathId="4" /><Query Id="7" ObjectPathId="4"><Query SelectAllProperties="false"><Properties><Property Name="Id" ScalarProperty="true" /><Property Name="Name" ScalarProperty="true" /><Property Name="Groups"><Query SelectAllProperties="false"><Properties /></Query><ChildItemQuery SelectAllProperties="false"><Properties><Property Name="Name" ScalarProperty="true" /><Property Name="Id" ScalarProperty="true" /><Property Name="IsSystemGroup" ScalarProperty="true" /><Property Name="TermSets"><Query SelectAllProperties="false"><Properties /></Query><ChildItemQuery SelectAllProperties="false"><Properties><Property Name="Name" ScalarProperty="true" /><Property Name="Id" ScalarProperty="true" /><Property Name="Description" ScalarProperty="true" /><Property Name="Names" ScalarProperty="true" /></Properties></ChildItemQuery></Property></Properties></ChildItemQuery></Property></Properties></Query></Query></Actions><ObjectPaths><StaticMethod Id="1" Name="GetTaxonomySession" TypeId="{981cbc68-9edc-4f8d-872f-71146fcbb84f}" /><Method Id="4" ParentId="1" Name="GetDefaultSiteCollectionTermStore" /></ObjectPaths></Request>';
+        var reqHeaders = new Headers();
+        reqHeaders.append('accept', 'application/json');
+        reqHeaders.append('content-type', 'application/xml');
+        var httpPostOptions = {
+            headers: reqHeaders,
+            body: data
+        };
+        return this.context.spHttpClient.post(this.clientServiceUrl, SPHttpClient.configurations.v1, httpPostOptions).then(function (serviceResponse) {
+            return serviceResponse.json().then(function (serviceJSONResponse) {
+                // Construct results
+                var termStoreResult = serviceJSONResponse.filter(function (r) { return r['_ObjectType_'] === 'SP.Taxonomy.TermStore'; });
+                // Check if term store was retrieved
+                if (termStoreResult.length > 0) {
+                    // Check if the termstore needs to be filtered or limited
+                    if (_this.props.termsetNameOrID) {
+                        return termStoreResult.map(function (termstore) {
+                            var termGroups = termstore.Groups._Child_Items_;
+                            // Check if the groups have to be limited to a specific term set
+                            if (_this.props.termsetNameOrID) {
+                                var termsetNameOrId_1 = _this.props.termsetNameOrID;
+                                termGroups = termGroups.map(function (group) {
+                                    group.TermSets._Child_Items_ = group.TermSets._Child_Items_.filter(function (termSet) { return termSet.Name === termsetNameOrId_1 || _this.cleanGuid(termSet.Id).toLowerCase() === _this.cleanGuid(termsetNameOrId_1).toLowerCase(); });
+                                    return group;
+                                });
+                            }
+                            // Filter out all systen groups
+                            termGroups = termGroups.filter(function (group) { return !group.IsSystemGroup; });
+                            // Filter out empty groups
+                            termGroups = termGroups.filter(function (group) { return group.TermSets._Child_Items_.length > 0; });
+                            // Map the new groups
+                            termstore.Groups._Child_Items_ = termGroups;
+                            return termstore;
+                        });
+                    }
+                    // Return the term store results
+                    return termStoreResult;
+                }
+                return [];
+            });
+        });
+    };
+    /**
+     * Gets the current term set
+     */
+    SPTermStorePickerService.prototype.getTermSet = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var termStore;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.getTermStores()];
+                    case 1:
+                        termStore = _a.sent();
+                        return [2 /*return*/, this.getTermSetId(termStore, this.props.termsetNameOrID)];
+                }
+            });
+        });
+    };
+    /**
+     * Retrieve all terms for the given term set
+     * @param termset
+     */
+    SPTermStorePickerService.prototype.getAllTerms = function (termset, hideDeprecatedTags, hideTagsNotAvailableForTagging, useSessionStorage) {
+        if (useSessionStorage === void 0) { useSessionStorage = true; }
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            var termsetId, termStore, crntTermSet, childTerms, data, reqHeaders, httpPostOptions;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        termsetId = termset;
+                        if (!!this.isGuid(termset)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.getTermStores()];
+                    case 1:
+                        termStore = _a.sent();
+                        crntTermSet = this.getTermSetId(termStore, termset);
+                        if (crntTermSet) {
+                            termsetId = this.cleanGuid(crntTermSet.Id);
+                        }
+                        else {
+                            return [2 /*return*/, null];
+                        }
+                        _a.label = 2;
+                    case 2:
+                        childTerms = this.getTermsById(termsetId, useSessionStorage);
+                        if (childTerms) {
+                            return [2 /*return*/, childTerms];
+                        }
+                        data = "<Request xmlns=\"http://schemas.microsoft.com/sharepoint/clientquery/2009\" SchemaVersion=\"15.0.0.0\" LibraryVersion=\"16.0.0.0\" ApplicationName=\"Javascript Library\"><Actions><ObjectPath Id=\"1\" ObjectPathId=\"0\" /><ObjectIdentityQuery Id=\"2\" ObjectPathId=\"0\" /><ObjectPath Id=\"4\" ObjectPathId=\"3\" /><ObjectIdentityQuery Id=\"5\" ObjectPathId=\"3\" /><ObjectPath Id=\"7\" ObjectPathId=\"6\" /><ObjectIdentityQuery Id=\"8\" ObjectPathId=\"6\" /><ObjectPath Id=\"10\" ObjectPathId=\"9\" /><Query Id=\"11\" ObjectPathId=\"6\"><Query SelectAllProperties=\"true\"><Properties /></Query></Query><Query Id=\"12\" ObjectPathId=\"9\"><Query SelectAllProperties=\"false\"><Properties /></Query><ChildItemQuery SelectAllProperties=\"false\"><Properties><Property Name=\"IsRoot\" SelectAll=\"true\" /><Property Name=\"Labels\" SelectAll=\"true\" /><Property Name=\"TermsCount\" SelectAll=\"true\" /><Property Name=\"CustomSortOrder\" SelectAll=\"true\" /><Property Name=\"Id\" SelectAll=\"true\" /><Property Name=\"Name\" SelectAll=\"true\" /><Property Name=\"PathOfTerm\" SelectAll=\"true\" /><Property Name=\"Parent\" SelectAll=\"true\" /><Property Name=\"LocalCustomProperties\" SelectAll=\"true\" /><Property Name=\"IsDeprecated\" ScalarProperty=\"true\" /><Property Name=\"IsAvailableForTagging\" ScalarProperty=\"true\" /></Properties></ChildItemQuery></Query></Actions><ObjectPaths><StaticMethod Id=\"0\" Name=\"GetTaxonomySession\" TypeId=\"{981cbc68-9edc-4f8d-872f-71146fcbb84f}\" /><Method Id=\"3\" ParentId=\"0\" Name=\"GetDefaultKeywordsTermStore\" /><Method Id=\"6\" ParentId=\"3\" Name=\"GetTermSet\"><Parameters><Parameter Type=\"Guid\">" + termsetId + "</Parameter></Parameters></Method><Method Id=\"9\" ParentId=\"6\" Name=\"GetAllTerms\" /></ObjectPaths></Request>";
+                        reqHeaders = new Headers();
+                        reqHeaders.append('accept', 'application/json');
+                        reqHeaders.append('content-type', 'application/xml');
+                        httpPostOptions = {
+                            headers: reqHeaders,
+                            body: data
+                        };
+                        return [2 /*return*/, this.context.spHttpClient.post(this.clientServiceUrl, SPHttpClient.configurations.v1, httpPostOptions).then(function (serviceResponse) {
+                                return serviceResponse.json().then(function (serviceJSONResponse) {
+                                    var termStoreResultTermSets = serviceJSONResponse.filter(function (r) { return r['_ObjectType_'] === 'SP.Taxonomy.TermSet'; });
+                                    if (termStoreResultTermSets.length > 0) {
+                                        var termStoreResultTermSet_1 = termStoreResultTermSets[0];
+                                        termStoreResultTermSet_1.Terms = [];
+                                        // Retrieve the term collection results
+                                        var termStoreResultTerms = serviceJSONResponse.filter(function (r) { return r['_ObjectType_'] === 'SP.Taxonomy.TermCollection'; });
+                                        if (termStoreResultTerms.length > 0) {
+                                            // Retrieve all terms
+                                            var terms = termStoreResultTerms[0]._Child_Items_;
+                                            if (hideDeprecatedTags === true) {
+                                                terms = terms.filter(function (d) { return d.IsDeprecated === false; });
+                                            }
+                                            if (hideTagsNotAvailableForTagging === true) {
+                                                terms = terms.filter(function (d) { return d.IsAvailableForTagging === true; });
+                                            }
+                                            // Clean the term ID and specify the path depth
+                                            terms = terms.map(function (term) {
+                                                if (term.IsRoot) {
+                                                    term.CustomSortOrderIndex = (termStoreResultTermSet_1.CustomSortOrder) ? termStoreResultTermSet_1.CustomSortOrder.split(':').indexOf(_this.cleanGuid(term.Id)) : -1;
+                                                }
+                                                else {
+                                                    term.CustomSortOrderIndex = (term['Parent'].CustomSortOrder) ? term['Parent'].CustomSortOrder.split(':').indexOf(_this.cleanGuid(term.Id)) : -1;
+                                                }
+                                                term.Id = _this.cleanGuid(term.Id);
+                                                term['PathDepth'] = term.PathOfTerm.split(';').length;
+                                                term.TermSet = { Id: _this.cleanGuid(termStoreResultTermSet_1.Id), Name: termStoreResultTermSet_1.Name };
+                                                if (term['Parent']) {
+                                                    term.ParentId = _this.cleanGuid(term['Parent'].Id);
+                                                }
+                                                return term;
+                                            });
+                                            // Check if the term set was not empty
+                                            if (terms.length > 0) {
+                                                // Sort the terms by PathOfTerm and their depth
+                                                terms = _this.sortTerms(terms);
+                                                termStoreResultTermSet_1.Terms = terms;
+                                            }
+                                        }
+                                        try {
+                                            if (useSessionStorage && window.sessionStorage) {
+                                                window.sessionStorage.setItem(termsetId, JSON.stringify(termStoreResultTermSet_1));
+                                            }
+                                        }
+                                        catch (error) {
+                                            // Do nothing, sometimes "storage quota exceeded" error if too many items
+                                        }
+                                        return termStoreResultTermSet_1;
+                                    }
+                                    return null;
+                                });
+                            })];
+                }
+            });
+        });
+    };
+    /**
+     * Retrieve all terms that starts with the searchText
+     * @param searchText
+     */
+    SPTermStorePickerService.prototype.searchTermsByName = function (searchText) {
+        return this.searchTermsByTermSet(searchText);
+    };
+    SPTermStorePickerService.prototype.searchTermsByTermId = function (searchText, termId) {
+        return __awaiter(this, void 0, void 0, function () {
+            var useSessionStorage, childTerms, _a, termsetNameOrID, hideDeprecatedTags, hideTagsNotAvailableForTagging, terms;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        useSessionStorage = this.props.useSessionStorage;
+                        childTerms = this.getTermsById(termId, useSessionStorage);
+                        if (!childTerms) return [3 /*break*/, 1];
+                        return [2 /*return*/, this.searchTermsBySearchText(childTerms, searchText)];
+                    case 1:
+                        _a = this.props, termsetNameOrID = _a.termsetNameOrID, hideDeprecatedTags = _a.hideDeprecatedTags, hideTagsNotAvailableForTagging = _a.hideTagsNotAvailableForTagging;
+                        return [4 /*yield*/, this.getAllTermsByAnchorId(termsetNameOrID, termId, hideDeprecatedTags, hideTagsNotAvailableForTagging, useSessionStorage)];
+                    case 2:
+                        terms = _b.sent();
+                        if (terms) {
+                            return [2 /*return*/, this.searchTermsBySearchText(terms, searchText)];
+                        }
+                        _b.label = 3;
+                    case 3: return [2 /*return*/, null];
+                }
+            });
+        });
+    };
+    /**
+     * Retrieve all terms for the given term set and anchorId
+     */
+    SPTermStorePickerService.prototype.getAllTermsByAnchorId = function (termsetNameOrID, anchorId, hideDeprecatedTags, hideTagsNotAvailableForTagging, useSessionStorage) {
+        if (useSessionStorage === void 0) { useSessionStorage = true; }
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            var returnTerms, childTerms, termSet, terms, anchorTerm_1, anchorTermPath_1, anchorTerms;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        returnTerms = [];
+                        childTerms = this.getTermsById(anchorId, useSessionStorage);
+                        if (childTerms) {
+                            return [2 /*return*/, childTerms];
+                        }
+                        return [4 /*yield*/, this.getAllTerms(termsetNameOrID, hideDeprecatedTags, hideTagsNotAvailableForTagging)];
+                    case 1:
+                        termSet = _a.sent();
+                        terms = termSet.Terms;
+                        if (anchorId) {
+                            anchorTerm_1 = terms.filter(function (t) { return t.Id.toLowerCase() === anchorId.toLowerCase(); }).shift();
+                            if (anchorTerm_1) {
+                                anchorTermPath_1 = anchorTerm_1.PathOfTerm + ";";
+                                anchorTerms = terms.filter(function (t) { return t.PathOfTerm.substring(0, anchorTermPath_1.length) === anchorTermPath_1 && t.Id !== anchorTerm_1.Id; });
+                                anchorTerms.forEach(function (term) {
+                                    returnTerms.push(_this.convertTermToPickerTerm(term));
+                                });
+                                try {
+                                    if (useSessionStorage && window.sessionStorage) {
+                                        window.sessionStorage.setItem(anchorId, JSON.stringify(returnTerms));
+                                    }
+                                }
+                                catch (error) {
+                                    // Do nothing
+                                }
+                            }
+                        }
+                        else {
+                            terms.forEach(function (term) {
+                                returnTerms.push(_this.convertTermToPickerTerm(term));
+                            });
+                        }
+                        return [2 /*return*/, returnTerms];
+                }
+            });
+        });
+    };
+    /**
+     * Clean the Guid from the Web Service response
+     * @param guid
+     */
+    SPTermStorePickerService.prototype.cleanGuid = function (guid) {
+        if (guid !== undefined) {
+            return guid.replace('/Guid(', '').replace('/', '').replace(')', '');
+        }
+        else {
+            return '';
+        }
+    };
+    /**
+      * Get the term set ID by its name
+      * @param termstore
+      * @param termset
+      */
+    SPTermStorePickerService.prototype.getTermSetId = function (termstore, termsetName) {
+        if (termstore && termstore.length > 0 && termsetName) {
+            // Get the first term store
+            var ts = termstore[0];
+            // Check if the term store contains groups
+            if (ts.Groups && ts.Groups._Child_Items_) {
+                for (var _i = 0, _a = ts.Groups._Child_Items_; _i < _a.length; _i++) {
+                    var group = _a[_i];
+                    // Check if the group contains term sets
+                    if (group.TermSets && group.TermSets._Child_Items_) {
+                        for (var _b = 0, _c = group.TermSets._Child_Items_; _b < _c.length; _b++) {
+                            var termSet = _c[_b];
+                            // Check if the term set is found
+                            if (termSet.Name === termsetName) {
+                                return termSet;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return null;
+    };
+    SPTermStorePickerService.prototype.getTermsById = function (termId, useSessionStorage) {
+        if (useSessionStorage === void 0) { useSessionStorage = true; }
+        try {
+            if (useSessionStorage && window.sessionStorage) {
+                var terms = window.sessionStorage.getItem(termId);
+                if (terms) {
+                    return JSON.parse(terms);
+                }
+                else {
+                    return null;
+                }
+            }
+            else {
+                return null;
+            }
+        }
+        catch (error) {
+            return null;
+        }
+    };
+    SPTermStorePickerService.prototype.searchTermsBySearchText = function (terms, searchText) {
+        if (terms) {
+            return terms.filter(function (t) { return t.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1; });
+        }
+        else {
+            return [];
+        }
+    };
+    /**
+       * Searches terms for the given term set
+       * @param searchText
+       * @param termsetId
+       */
+    SPTermStorePickerService.prototype.searchTermsByTermSet = function (searchText) {
+        var _this = this;
+        return new Promise(function (resolve) {
+            _this.getTermStores().then(function (termStore) {
+                var termSetId = _this.props.termsetNameOrID;
+                if (!_this.isGuid(termSetId)) {
+                    // Get the ID of the provided term set name
+                    var crntTermSet = _this.getTermSetId(termStore, termSetId);
+                    if (crntTermSet) {
+                        termSetId = _this.cleanGuid(crntTermSet.Id);
+                    }
+                    else {
+                        resolve(null);
+                        return;
+                    }
+                }
+                if (termStore === undefined || termStore.length === 0) {
+                    resolve(null);
+                    return;
+                }
+                var loc = _this.context.pageContext.cultureInfo.currentUICultureName === 'de-de' ? 1031 : 1033;
+                var data = {
+                    start: searchText,
+                    lcid: loc !== 0 ? loc : _this.context.pageContext.web.language,
+                    sspList: _this.cleanGuid(termStore[0].Id),
+                    termSetList: termSetId,
+                    anchorId: _this.props.anchorId ? _this.props.anchorId : EmptyGuid,
+                    isSpanTermStores: false,
+                    isSpanTermSets: false,
+                    isIncludeUnavailable: _this.props.hideTagsNotAvailableForTagging === true,
+                    isIncludeDeprecated: _this.props.hideDeprecatedTags === true,
+                    isAddTerms: false,
+                    isIncludePathData: false,
+                    excludeKeyword: false,
+                    excludedTermset: EmptyGuid
+                };
+                var reqHeaders = new Headers();
+                reqHeaders.append('accept', 'application/json');
+                reqHeaders.append('content-type', 'application/json');
+                var httpPostOptions = {
+                    headers: reqHeaders,
+                    body: JSON.stringify(data)
+                };
+                return _this.context.spHttpClient.post(_this.suggestionServiceUrl, SPHttpClient.configurations.v1, httpPostOptions).then(function (serviceResponse) {
+                    return serviceResponse.json().then(function (serviceJSONResponse) {
+                        var groups = serviceJSONResponse.d.Groups;
+                        if (groups && groups.length > 0) {
+                            // Retrieve the term collection results
+                            var terms = groups[0].Suggestions;
+                            if (terms.length > 0) {
+                                // Retrieve all terms
+                                var returnTerms = terms.map(function (term) { return _this.convertSuggestTermToPickerTerm(term); });
+                                resolve(returnTerms);
+                                return;
+                            }
+                        }
+                        resolve([]);
+                    });
+                });
+            });
+        });
+    };
+    SPTermStorePickerService.prototype.isGuid = function (strGuid) {
+        return /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/.test(strGuid);
+    };
+    /**
+     * Sorting terms based on their path and depth
+     *
+     * @param terms
+     */
+    SPTermStorePickerService.prototype.sortTerms = function (terms) {
+        // Start sorting by depth
+        var newTermsOrder = [];
+        var itemsToSort = true;
+        var pathLevel = 1;
+        while (itemsToSort) {
+            // Get terms for the current level
+            var crntTerms = terms.filter(function (term) { return term.PathDepth === pathLevel; });
+            if (crntTerms && crntTerms.length > 0) {
+                crntTerms = crntTerms.sort(this.sortTermByPath);
+                if (pathLevel !== 1) {
+                    crntTerms = crntTerms.reverse();
+                    var _loop_1 = function (crntTerm) {
+                        var pathElms = crntTerm.PathOfTerm.split(';');
+                        // Last item is not needed for parent path
+                        pathElms.pop();
+                        // Find the parent item and add the new item
+                        var idx = findIndex(newTermsOrder, function (term) { return term.PathOfTerm === pathElms.join(';'); });
+                        if (idx !== -1) {
+                            newTermsOrder.splice(idx + 1, 0, crntTerm);
+                        }
+                        else {
+                            // Push the item at the end if the parent couldn't be found
+                            newTermsOrder.push(crntTerm);
+                        }
+                    };
+                    for (var _i = 0, crntTerms_1 = crntTerms; _i < crntTerms_1.length; _i++) {
+                        var crntTerm = crntTerms_1[_i];
+                        _loop_1(crntTerm);
+                    }
+                }
+                else {
+                    newTermsOrder = crntTerms;
+                }
+                ++pathLevel;
+            }
+            else {
+                itemsToSort = false;
+            }
+        }
+        return newTermsOrder;
+    };
+    /**
+     * Sort the terms by their path
+     *
+     * @param a term 2
+     * @param b term 2
+     */
+    SPTermStorePickerService.prototype.sortTermByPath = function (a, b) {
+        if (a.CustomSortOrderIndex === -1) {
+            if (a.PathOfTerm.toLowerCase() < b.PathOfTerm.toLowerCase()) {
+                return -1;
+            }
+            if (a.PathOfTerm.toLowerCase() > b.PathOfTerm.toLowerCase()) {
+                return 1;
+            }
+            return 0;
+        }
+        else {
+            if (a.CustomSortOrderIndex < b.CustomSortOrderIndex) {
+                return -1;
+            }
+            if (a.CustomSortOrderIndex > b.CustomSortOrderIndex) {
+                return 1;
+            }
+            return 0;
+        }
+    };
+    SPTermStorePickerService.prototype.convertTermToPickerTerm = function (term) {
+        return {
+            key: this.cleanGuid(term.Id),
+            name: term.Name,
+            path: term.PathOfTerm,
+            termSet: this.cleanGuid(term.TermSet.Id),
+            termSetName: term.TermSet.Name
+        };
+    };
+    SPTermStorePickerService.prototype.convertSuggestTermToPickerTerm = function (term) {
+        var path = '';
+        var termSetName = '';
+        if (term.Paths && term.Paths.length > 0) {
+            var fullPath = term.Paths[0].replace(/^\[/, '').replace(/\]$/, '');
+            var fullPathParts = fullPath.split(':');
+            path = fullPathParts.join(';') + ';' + term.DefaultLabel;
+            termSetName = fullPathParts[0];
+        }
+        return {
+            key: this.cleanGuid(term.Id),
+            name: term.DefaultLabel,
+            path: path,
+            termSet: EmptyGuid,
+            termSetName: termSetName
+        };
+    };
+    return SPTermStorePickerService;
+}());
+export default SPTermStorePickerService;
+
+//# sourceMappingURL=SPTermStorePickerService.js.map
--- a/lib/services/SPTermStorePickerService.js.map
+++ b/lib/services/SPTermStorePickerService.js.map
--- a/lib/services/TaxonomyNavigationService.d.ts
+++ b/lib/services/TaxonomyNavigationService.d.ts
@@ -0,0 +1,11 @@
+import { ITaxonomyNavigationService } from './ITaxonomyNavigationService';
+import { IMenuItem } from './IMenuItem';
+import { ApplicationCustomizerContext } from '@microsoft/sp-application-base';
+export declare class TaxonomyNavigationService implements ITaxonomyNavigationService {
+    private context;
+    private termSetName;
+    private _taxonomyPickerService;
+    private _noTerm;
+    constructor(context: ApplicationCustomizerContext, termSetName: string);
+    getMenuItems(): Promise<IMenuItem[]>;
+}
--- a/lib/services/TaxonomyNavigationService.js
+++ b/lib/services/TaxonomyNavigationService.js
@@ -0,0 +1,120 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [0, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { sp } from '@pnp/sp';
+import { MenuItem } from './MenuItem';
+import SPTermStorePickerService from './SPTermStorePickerService';
+import { ItemDictionary } from './ItemDictionary';
+var TaxonomyNavigationService = (function () {
+    function TaxonomyNavigationService(context /*, private lcid: number*/, termSetName) {
+        this.context = context; /*, private lcid: number*/
+        this.termSetName = termSetName;
+        this._noTerm = {
+            _ObjectType_: '',
+            _ObjectIdentity_: '',
+            CustomSortOrderIndex: 0,
+            Description: '',
+            Id: '',
+            IsAvailableForTagging: false,
+            IsDeprecated: false,
+            IsRoot: true,
+            LocalCustomProperties: {
+                _Sys_Nav_HoverText: 'Es wurden keine Terms gefunden. Bitte überprüfen Sie Ihre Einstellungen.',
+                _Sys_Nav_ExcludedProviders: undefined,
+                _Sys_Nav_SimpleLinkUrl: undefined
+            },
+            Name: 'Es wurden keine Terms gefunden. Bitte überprüfen Sie Ihre Einstellungen.',
+            PathOfTerm: '',
+            TermSet: undefined
+        };
+        sp.setup({
+            spfxContext: context
+        });
+        this._taxonomyPickerService = new SPTermStorePickerService({
+            anchorId: '',
+            termsetNameOrID: termSetName,
+            useSessionStorage: true,
+            hideDeprecatedTags: true,
+            hideTagsNotAvailableForTagging: false
+        }, this.context);
+    }
+    // Implement the methods from ITaxonomyNavigationService interface here
+    TaxonomyNavigationService.prototype.getMenuItems = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            var siteCollectionUrl, termset, itemsDict, menuItems;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        siteCollectionUrl = this.context.pageContext.site.absoluteUrl;
+                        return [4 /*yield*/, this._taxonomyPickerService.getAllTerms(this.termSetName)];
+                    case 1:
+                        termset = _a.sent();
+                        itemsDict = new ItemDictionary();
+                        menuItems = [];
+                        if (!termset || !termset.Terms) {
+                            console.warn('No terms found in the term set');
+                            return [2 /*return*/, [new MenuItem(this._noTerm, 0, siteCollectionUrl)]];
+                        }
+                        termset.Terms.forEach(function (term) { return __awaiter(_this, void 0, void 0, function () {
+                            var menuItem, parentItem;
+                            return __generator(this, function (_a) {
+                                menuItem = new MenuItem(term, 0, siteCollectionUrl);
+                                itemsDict.Add(term.Id, menuItem);
+                                if (menuItem.pathDepth === 1) {
+                                    menuItems.push(menuItem);
+                                }
+                                else {
+                                    parentItem = itemsDict.Get(term.ParentId);
+                                    if (parentItem) {
+                                        parentItem.items.push(menuItem);
+                                    }
+                                    else {
+                                        console.warn("Item without parent: " + term.PathOfTerm);
+                                    }
+                                }
+                                return [2 /*return*/];
+                            });
+                        }); });
+                        return [2 /*return*/, menuItems];
+                }
+            });
+        });
+    };
+    return TaxonomyNavigationService;
+}());
+export { TaxonomyNavigationService };
+
+//# sourceMappingURL=TaxonomyNavigationService.js.map
--- a/lib/services/TaxonomyNavigationService.js.map
+++ b/lib/services/TaxonomyNavigationService.js.map
--- a/lib/services/UserCustomActionService/IUserCustomActionProps.d.ts
+++ b/lib/services/UserCustomActionService/IUserCustomActionProps.d.ts
@@ -0,0 +1,20 @@
+export interface IUserCustomActionProps {
+    Id?: string;
+    Title: string;
+    Name?: string;
+    Description?: string;
+    Location: string;
+    ScriptSrc?: string;
+    ScriptBlock?: string;
+    Url?: string;
+    Sequence?: number;
+    Group?: string;
+    ImageUrl?: string;
+    CommandUIExtension?: string;
+    RegistrationType?: number;
+    RegistrationId?: string;
+    Rights?: {};
+    Scope?: number;
+    ClientSideComponentId?: string;
+    ClientSideComponentProperties?: string;
+}
--- a/lib/services/UserCustomActionService/IUserCustomActionProps.js
+++ b/lib/services/UserCustomActionService/IUserCustomActionProps.js
@@ -0,0 +1,3 @@
+
+
+//# sourceMappingURL=IUserCustomActionProps.js.map
--- a/lib/services/UserCustomActionService/IUserCustomActionProps.js.map
+++ b/lib/services/UserCustomActionService/IUserCustomActionProps.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"services/UserCustomActionService/IUserCustomActionProps.js","sourcesContent":[],"sourceRoot":"..\\..\\..\\src"}
--- a/lib/services/UserCustomActionService/IUserCustomActionService.d.ts
+++ b/lib/services/UserCustomActionService/IUserCustomActionService.d.ts
@@ -0,0 +1,10 @@
+import { UserCustomActionScope } from './UserCustomActionScope';
+import { IUserCustomActionProps } from './IUserCustomActionProps';
+import { UserCustomActionAddResult, UserCustomActionUpdateResult } from '@pnp/sp';
+export interface IUserCustomActionService {
+    getUserCustomActions(scope: UserCustomActionScope, listId?: string): Promise<IUserCustomActionProps[]>;
+    getUserCustomActionById(scope: UserCustomActionScope, id: string, listId?: string): Promise<IUserCustomActionProps>;
+    addUserCustomAction(scope: UserCustomActionScope, customAction: IUserCustomActionProps, listId?: string): Promise<UserCustomActionAddResult>;
+    updateUserCustomAction(scope: UserCustomActionScope, id: string, props: {}, listId?: string): Promise<UserCustomActionUpdateResult>;
+    deleteUserCustomAction(scope: UserCustomActionScope, customAction: IUserCustomActionProps, listId?: string): Promise<void>;
+}
--- a/lib/services/UserCustomActionService/IUserCustomActionService.js
+++ b/lib/services/UserCustomActionService/IUserCustomActionService.js
@@ -0,0 +1,3 @@
+
+
+//# sourceMappingURL=IUserCustomActionService.js.map
--- a/lib/services/UserCustomActionService/IUserCustomActionService.js.map
+++ b/lib/services/UserCustomActionService/IUserCustomActionService.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"services/UserCustomActionService/IUserCustomActionService.js","sourcesContent":[],"sourceRoot":"..\\..\\..\\src"}
--- a/lib/services/UserCustomActionService/UserCustomActionScope.d.ts
+++ b/lib/services/UserCustomActionService/UserCustomActionScope.d.ts
@@ -0,0 +1,5 @@
+export declare enum UserCustomActionScope {
+    Web = "web",
+    Site = "site",
+    List = "list",
+}
--- a/lib/services/UserCustomActionService/UserCustomActionScope.js
+++ b/lib/services/UserCustomActionService/UserCustomActionScope.js
@@ -0,0 +1,8 @@
+export var UserCustomActionScope;
+(function (UserCustomActionScope) {
+    UserCustomActionScope["Web"] = "web";
+    UserCustomActionScope["Site"] = "site";
+    UserCustomActionScope["List"] = "list";
+})(UserCustomActionScope = UserCustomActionScope || (UserCustomActionScope = {}));
+
+//# sourceMappingURL=UserCustomActionScope.js.map
--- a/lib/services/UserCustomActionService/UserCustomActionScope.js.map
+++ b/lib/services/UserCustomActionService/UserCustomActionScope.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["services/UserCustomActionService/UserCustomActionScope.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,qBAIX;AAJD,WAAY,qBAAqB;IAC7B,oCAAW,CAAA;IACX,sCAAa,CAAA;IACb,sCAAa,CAAA;AACjB,CAAC,EAJW,qBAAqB,GAArB,qBAAqB,KAArB,qBAAqB,QAIhC","file":"services/UserCustomActionService/UserCustomActionScope.js","sourcesContent":["export enum UserCustomActionScope {\r\n    Web = 'web',\r\n    Site = 'site',\r\n    List = 'list'\r\n}\r\n"],"sourceRoot":"..\\..\\..\\src"}
--- a/lib/services/UserCustomActionService/UserCustomActionService.d.ts
+++ b/lib/services/UserCustomActionService/UserCustomActionService.d.ts
@@ -0,0 +1,13 @@
+import { UserCustomActionAddResult, UserCustomActionUpdateResult } from '@pnp/sp/src/usercustomactions';
+import { IUserCustomActionService } from './IUserCustomActionService';
+import { UserCustomActionScope } from './UserCustomActionScope';
+import { IUserCustomActionProps } from './IUserCustomActionProps';
+import { ApplicationCustomizerContext } from '@microsoft/sp-application-base';
+export declare class UserCustomActionService implements IUserCustomActionService {
+    constructor(context: ApplicationCustomizerContext);
+    getUserCustomActions(scope: UserCustomActionScope, listId?: string): Promise<IUserCustomActionProps[]>;
+    getUserCustomActionById(scope: UserCustomActionScope, id: string, listId?: string): Promise<IUserCustomActionProps>;
+    addUserCustomAction(scope: UserCustomActionScope, customAction: IUserCustomActionProps, listId?: string): Promise<UserCustomActionAddResult>;
+    updateUserCustomAction(scope: UserCustomActionScope, id: string, props: {}, listId?: string): Promise<UserCustomActionUpdateResult>;
+    deleteUserCustomAction(scope: UserCustomActionScope, customAction: IUserCustomActionProps, listId?: string): Promise<void>;
+}
--- a/lib/services/UserCustomActionService/UserCustomActionService.js
+++ b/lib/services/UserCustomActionService/UserCustomActionService.js
@@ -0,0 +1,210 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [0, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { sp } from '@pnp/sp';
+import { UserCustomActionScope } from './UserCustomActionScope';
+var UserCustomActionService = (function () {
+    function UserCustomActionService(context) {
+        sp.setup({
+            spfxContext: context
+        });
+    }
+    UserCustomActionService.prototype.getUserCustomActions = function (scope, listId) {
+        return __awaiter(this, void 0, void 0, function () {
+            var actions, _a, error_1;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 9, , 10]);
+                        actions = void 0;
+                        _a = scope;
+                        switch (_a) {
+                            case UserCustomActionScope.Web: return [3 /*break*/, 1];
+                            case UserCustomActionScope.Site: return [3 /*break*/, 3];
+                            case UserCustomActionScope.List: return [3 /*break*/, 5];
+                        }
+                        return [3 /*break*/, 7];
+                    case 1: return [4 /*yield*/, sp.web.userCustomActions.get()];
+                    case 2:
+                        actions = _b.sent();
+                        return [3 /*break*/, 8];
+                    case 3: return [4 /*yield*/, sp.site.userCustomActions.get()];
+                    case 4:
+                        actions = _b.sent();
+                        return [3 /*break*/, 8];
+                    case 5:
+                        if (!listId) {
+                            throw new Error('List ID is required for List scope');
+                        }
+                        return [4 /*yield*/, sp.web.lists.getById(listId).userCustomActions.get()];
+                    case 6:
+                        actions = _b.sent();
+                        return [3 /*break*/, 8];
+                    case 7: throw new Error('Invalid scope');
+                    case 8: return [2 /*return*/, actions];
+                    case 9:
+                        error_1 = _b.sent();
+                        console.error('Error getting user custom actions: ', error_1);
+                        throw error_1;
+                    case 10: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    UserCustomActionService.prototype.getUserCustomActionById = function (scope, id, listId) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                try {
+                    switch (scope) {
+                        case UserCustomActionScope.Web:
+                            return [2 /*return*/, sp.web.userCustomActions.getById(id)];
+                        case UserCustomActionScope.Site:
+                            return [2 /*return*/, sp.site.userCustomActions.getById(id)];
+                        case UserCustomActionScope.List:
+                            if (!listId) {
+                                throw new Error('List ID is required for List scope');
+                            }
+                            return [2 /*return*/, sp.web.lists.getById(listId).userCustomActions.getById(id)];
+                        default:
+                            throw new Error('Invalid scope');
+                    }
+                }
+                catch (error) {
+                    console.error('Error getting user custom action by ID: ', error);
+                    throw error;
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    UserCustomActionService.prototype.addUserCustomAction = function (scope, customAction, listId) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                try {
+                    switch (scope) {
+                        case UserCustomActionScope.Web:
+                            return [2 /*return*/, sp.web.userCustomActions.add(customAction)];
+                        case UserCustomActionScope.Site:
+                            return [2 /*return*/, sp.site.userCustomActions.add(customAction)];
+                        case UserCustomActionScope.List:
+                            if (!listId) {
+                                throw new Error('List ID is required for List scope');
+                            }
+                            return [2 /*return*/, sp.web.lists.getById(listId).userCustomActions.add(customAction)];
+                        default:
+                            throw new Error('Invalid scope');
+                    }
+                }
+                catch (error) {
+                    console.error('Error adding user custom action: ', error);
+                    throw error;
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    UserCustomActionService.prototype.updateUserCustomAction = function (scope, id, props, listId) {
+        return __awaiter(this, void 0, void 0, function () {
+            var result, _a, error_2;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 9, , 10]);
+                        result = void 0;
+                        _a = scope;
+                        switch (_a) {
+                            case UserCustomActionScope.Web: return [3 /*break*/, 1];
+                            case UserCustomActionScope.Site: return [3 /*break*/, 3];
+                            case UserCustomActionScope.List: return [3 /*break*/, 5];
+                        }
+                        return [3 /*break*/, 7];
+                    case 1: return [4 /*yield*/, sp.web.userCustomActions.getById(id).update(props)];
+                    case 2:
+                        result = _b.sent();
+                        return [3 /*break*/, 8];
+                    case 3: return [4 /*yield*/, sp.site.userCustomActions.getById(id).update(props)];
+                    case 4:
+                        result = _b.sent();
+                        return [3 /*break*/, 8];
+                    case 5:
+                        if (!listId) {
+                            throw new Error('List ID is required for List scope');
+                        }
+                        return [4 /*yield*/, sp.web.lists.getById(listId).userCustomActions.getById(id).update(props)];
+                    case 6:
+                        result = _b.sent();
+                        return [3 /*break*/, 8];
+                    case 7: throw new Error('Invalid scope');
+                    case 8: return [2 /*return*/, result];
+                    case 9:
+                        error_2 = _b.sent();
+                        console.error('Error updating user custom action: ', error_2);
+                        throw error_2;
+                    case 10: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    UserCustomActionService.prototype.deleteUserCustomAction = function (scope, customAction, listId) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                try {
+                    switch (scope) {
+                        case UserCustomActionScope.Web:
+                            return [2 /*return*/, sp.web.userCustomActions.getById(customAction.Id).delete()];
+                        case UserCustomActionScope.Site:
+                            return [2 /*return*/, sp.site.userCustomActions.getById(customAction.Id).delete()];
+                        case UserCustomActionScope.List:
+                            if (!listId) {
+                                throw new Error('List ID is required for List scope');
+                            }
+                            return [2 /*return*/, sp.web.lists.getById(listId).userCustomActions.getById(customAction.Id).delete()];
+                        default:
+                            throw new Error('Invalid scope');
+                    }
+                }
+                catch (error) {
+                    console.error('Error deleting user custom action: ', error);
+                    throw error;
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    return UserCustomActionService;
+}());
+export { UserCustomActionService };
+
+//# sourceMappingURL=UserCustomActionService.js.map
--- a/lib/services/UserCustomActionService/UserCustomActionService.js.map
+++ b/lib/services/UserCustomActionService/UserCustomActionService.js.map
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "mega-menu",
+  "version": "1.0.4",
+  "private": true,
+  "main": "lib/index.js",
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "scripts": {
+    "build": "gulp bundle",
+    "clean": "gulp clean",
+    "test": "gulp test"
+  },
+  "dependencies": {
+    "@microsoft/decorators": "~1.4.1",
+    "@microsoft/sp-application-base": "~1.4.1",
+    "@microsoft/sp-core-library": "~1.4.1",
+    "@microsoft/sp-dialog": "~1.4.0",
+    "@microsoft/sp-office-ui-fabric-core": "^1.4.1",
+    "@pnp/common": "^1.3.11",
+    "@pnp/logging": "^1.3.11",
+    "@pnp/odata": "^1.3.11",
+    "@pnp/sp": "^1.3.11",
+    "@pnp/sp-clientsvc": "^1.3.11",
+    "@pnp/sp-taxonomy": "^1.3.11",
+    "@pnp/telemetry-js": "^2.0.0",
+    "@types/es6-promise": "0.0.33",
+    "@types/webpack-env": "1.13.1"
+  },
+  "devDependencies": {
+    "@microsoft/sp-build-web": "~1.4.1",
+    "@microsoft/sp-module-interfaces": "~1.4.1",
+    "@microsoft/sp-webpart-workbench": "~1.4.1",
+    "gulp": "~3.9.1",
+    "@types/chai": "3.4.34",
+    "@types/mocha": "2.2.38",
+    "ajv": "~5.2.2"
+  }
+}
--- a/src/extensions/megaMenu/MegaMenu.module.scss
+++ b/src/extensions/megaMenu/MegaMenu.module.scss
@@ -0,0 +1,474 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+/*
+Global override example:
+:root {
+    --themePrimary: #00407f;
+    --themeLighterAlt: #f0f5fa;
+    --themeLighter: #c5d8eb;
+    --themeLight: #98b8d9;
+    --themeTertiary: #477db3;
+    --themeSecondary: #11508f;
+    --themeDarkAlt: #003973;
+    --themeDark: #003061;
+    --themeDarker: #002447;
+    --neutralLighterAlt: #faf9f8;
+    --neutralLighter: #f3f2f1;
+    --neutralLight: #edebe9;
+    --neutralQuaternaryAlt: #e1dfdd;
+    --neutralQuaternary: #d0d0d0;
+    --neutralTertiaryAlt: #c8c6c4;
+    --neutralTertiary: #a19f9d;
+    --neutralSecondary: #605e5c;
+    --neutralSecondaryAlt: #8a8886;
+    --neutralPrimaryAlt: #3b3a39;
+    --neutralPrimary: #323130;
+    --neutralDark: #201f1e;
+    --black: #000000;
+    --white: #ffffff;
+
+    --megaMenuNavBackground: #5f6f74;
+    --megaMenuNavHoverBackground: #6f8085;
+    --megaMenuNavOpenBackground: #728388;
+    --megaMenuNavTextColor: #ffffff;
+    --megaMenuNavDividerColor: rgba(255, 255, 255, 0.22);
+    --megaMenuPanelWidth: 1280px;
+    --megaMenuZIndex: 6000;
+}
+*/
+
+$mm-white: var(--white, #{$ms-color-white});
+$mm-panel-surface: var(--white, #{$ms-color-white});
+$mm-panel-border: var(--neutralLight, #{$ms-color-neutralLight});
+$mm-panel-divider: var(--neutralQuaternaryAlt, #{$ms-color-neutralQuaternaryAlt});
+$mm-text: var(--neutralPrimary, #{$ms-color-neutralPrimary});
+$mm-text-muted: var(--neutralSecondary, #{$ms-color-neutralSecondary});
+$mm-nav-background: var(--megaMenuNavBackground, #5f6f74);
+$mm-nav-hover-background: var(--megaMenuNavHoverBackground, #6f8085);
+$mm-nav-open-background: var(--megaMenuNavOpenBackground, #728388);
+$mm-nav-divider: var(--megaMenuNavDividerColor, rgba(255, 255, 255, 0.22));
+$mm-nav-text: var(--megaMenuNavTextColor, #ffffff);
+$mm-focus-accent: var(--themePrimary, #{$ms-color-themePrimary});
+$mm-focus-soft: var(--themeLighterAlt, #{$ms-color-themeLighterAlt});
+$mm-panel-shadow: var(--megaMenuPanelShadow, 0 14px 28px rgba(0, 0, 0, 0.18));
+$mm-panel-width: var(--megaMenuPanelWidth, 1280px);
+$mm-nav-height: var(--megaMenuTopNavHeight, 34px);
+$mm-nav-inline-padding: var(--megaMenuNavInlinePadding, 8px);
+$mm-item-inline-padding: var(--megaMenuItemInlinePadding, 12px);
+$mm-column-padding-x: var(--megaMenuColumnPaddingX, 18px);
+$mm-column-padding-y: var(--megaMenuColumnPaddingY, 16px);
+$mm-link-radius: var(--megaMenuLinkRadius, 2px);
+$mm-layer-index: var(--megaMenuZIndex, 6000);
+
+:global {
+:root {
+    --megaMenuNavBackground: #5f6f74;
+    --megaMenuNavHoverBackground: #6f8085;
+    --megaMenuNavOpenBackground: #728388;
+    --megaMenuNavTextColor: #ffffff;
+    --megaMenuNavDividerColor: rgba(255, 255, 255, 0.22);
+    --megaMenuTopNavHeight: 34px;
+    --megaMenuPanelWidth: 1280px;
+    --megaMenuPanelShadow: 0 14px 28px rgba(0, 0, 0, 0.18);
+    --megaMenuZIndex: 6000;
+    --megaMenuNavInlinePadding: 8px;
+    --megaMenuItemInlinePadding: 12px;
+    --megaMenuColumnPaddingX: 18px;
+    --megaMenuColumnPaddingY: 16px;
+    --megaMenuLinkRadius: 2px;
+    --megaMenuColumnCount: 4;
+}
+
+.skip-link {
+    position: absolute;
+    top: -40px;
+    left: 6px;
+    background: $mm-focus-accent;
+    color: $mm-white;
+    padding: 8px 12px;
+    text-decoration: none;
+    font-weight: 600;
+    border-radius: 4px;
+    z-index: 10000;
+    transition: top 0.2s ease;
+}
+
+.skip-link:focus {
+    top: 6px;
+}
+
+#CustomNavigation {
+    position: relative;
+    overflow: visible;
+    z-index: $mm-layer-index;
+}
+
+.mega-menu-main {
+    position: relative;
+    width: 100%;
+    background-color: #5f6f74;
+    background-color: $mm-nav-background;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
+    box-shadow: none;
+    overflow: visible;
+    z-index: $mm-layer-index;
+}
+
+.mega-menu-main > ul,
+.mega-menu-top-level {
+    margin: 0 auto;
+    max-width: $mm-panel-width;
+    background-color: inherit;
+    width: 100%;
+    box-sizing: border-box;
+    list-style: none;
+    padding: 0 $mm-nav-inline-padding;
+    padding-inline-start: $mm-nav-inline-padding;
+    display: flex;
+    align-items: stretch;
+    justify-content: flex-start;
+    gap: 0;
+}
+
+.mega-menu-main > ul > li,
+.mega-menu-top-item {
+    position: static;
+    display: flex;
+    align-items: stretch;
+    flex: 0 0 auto;
+    border-right: 1px solid $mm-nav-divider;
+}
+
+.mega-menu-main > ul > li:last-child,
+.mega-menu-top-item:last-child {
+    border-right: 0;
+}
+
+.mega-menu-main > ul > li > a,
+.mega-menu-main > ul > li > span[role="menuitem"],
+.menu-item-link,
+.menu-item-text {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: $mm-nav-height;
+    padding: 0 $mm-item-inline-padding;
+    color: $mm-nav-text;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1;
+    text-decoration: none;
+    background: transparent;
+    border: 0;
+    transition: background-color 0.14s ease, color 0.14s ease;
+    outline: none;
+    white-space: nowrap;
+}
+
+.menu-item-text {
+    cursor: pointer;
+}
+
+.menu-item-has-children::after {
+    content: '';
+    width: 5px;
+    height: 5px;
+    margin-left: 8px;
+    border-right: 1px solid currentColor;
+    border-bottom: 1px solid currentColor;
+    transform: translateY(-1px) rotate(45deg);
+    transition: transform 0.14s ease;
+}
+
+.menu-item-has-children[aria-expanded="true"]::after {
+    transform: translateY(1px) rotate(-135deg);
+}
+
+.mega-menu-top-item.is-active > a,
+.mega-menu-top-item.is-active > span,
+.menu-item-link.is-active,
+.menu-item-text.is-active {
+    background: $mm-nav-open-background;
+}
+
+.mega-menu-top-item.is-current > a,
+.mega-menu-top-item.is-current > span,
+.menu-item-link.is-current,
+.menu-item-text.is-current {
+    font-weight: 600;
+}
+
+.mega-menu-main > ul > li:hover > a,
+.mega-menu-main > ul > li:hover > span[role="menuitem"],
+.mega-menu-main > ul > li > a[aria-expanded="true"],
+.mega-menu-main > ul > li > span[aria-expanded="true"],
+.menu-item-link:hover,
+.menu-item-text:hover {
+    color: $mm-nav-text;
+    background: $mm-nav-hover-background;
+}
+
+.mega-menu-main > ul > li > a[aria-expanded="true"],
+.mega-menu-main > ul > li > span[aria-expanded="true"] {
+    background: $mm-nav-open-background;
+}
+
+.mega-menu-main > ul > li > a:focus,
+.mega-menu-main > ul > li > span[role="menuitem"]:focus,
+.menu-item-link:focus,
+.menu-item-text:focus {
+    color: $mm-nav-text;
+    background: $mm-nav-open-background;
+    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.65);
+}
+
+.mega-menu {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 100%;
+    display: none;
+    visibility: hidden;
+    opacity: 0;
+    background-color: #ffffff;
+    background-color: $mm-panel-surface;
+    background-image: none;
+    mix-blend-mode: normal;
+    border: 1px solid $mm-panel-border;
+    border-top: 0;
+    box-shadow: $mm-panel-shadow;
+    max-height: calc(100vh - #{$mm-nav-height});
+    isolation: isolate;
+    overflow-y: auto;
+    overflow-x: hidden;
+    z-index: calc(#{$mm-layer-index} + 1);
+    transition: opacity 0.16s ease, visibility 0.16s ease;
+}
+
+.mega-menu-main > ul > li:hover .mega-menu,
+.mega-menu.js-open {
+    visibility: visible;
+    opacity: 1;
+    display: block;
+    background-color: #ffffff;
+    background-color: $mm-panel-surface;
+    background-image: none;
+}
+
+.mega-menu-grid {
+    max-width: $mm-panel-width;
+    background-color: inherit;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(var(--megaMenuColumnCount, 4), minmax(0, 1fr));
+    gap: 0;
+    align-items: start;
+}
+
+.mega-menu-category {
+    min-width: 0;
+    padding: $mm-column-padding-y $mm-column-padding-x 14px;
+    border-right: 1px solid $mm-panel-divider;
+}
+
+.mega-menu-grid > .mega-menu-category:last-child {
+    border-right: 0;
+}
+
+.mega-menu-category > h3,
+.mega-menu-category-title {
+    margin: 0 0 10px;
+    padding: 0;
+    border: 0;
+}
+
+.mega-menu-category > h3 > span,
+.mega-menu-category > h3 > a {
+    display: block;
+    color: $mm-text;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 18px;
+    text-decoration: none;
+}
+
+.mega-menu-category.is-active > h3 > span,
+.mega-menu-category.is-active > h3 > a,
+.mega-menu-category > h3 > span.is-active,
+.mega-menu-category > h3 > a.is-active {
+    color: $mm-text;
+}
+
+.mega-menu-category.is-current > h3 > a,
+.mega-menu-category > h3 > a.is-current {
+    text-decoration: underline;
+}
+
+.mega-menu-category > h3 > a:hover {
+    color: $mm-text;
+    text-decoration: underline;
+}
+
+.mega-menu-category > h3 > a:focus {
+    background: $mm-focus-soft;
+    color: $mm-text;
+    border-radius: 2px;
+    box-shadow: 0 0 0 2px $mm-focus-accent;
+    padding: 1px 4px;
+    margin: -1px -4px;
+}
+
+.mega-menu-category ul,
+.mega-menu-links {
+    list-style: none;
+    margin: 0;
+    padding-inline-start: 0;
+}
+
+.mega-menu-category ul li,
+.mega-menu-links li {
+    margin: 0 0 6px;
+}
+
+.mega-menu-category ul li:last-child,
+.mega-menu-links li:last-child {
+    margin-bottom: 0;
+}
+
+.mega-menu-category ul li a,
+.mega-menu-links li a {
+    display: block;
+    margin: 0;
+    padding: 1px 2px;
+    border-radius: $mm-link-radius;
+    color: $mm-text-muted;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    text-decoration: none;
+    transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
+}
+
+.mega-menu-category ul li.is-active > a,
+.mega-menu-links li.is-active > a,
+.mega-menu-category ul li a.is-active,
+.mega-menu-links li a.is-active {
+    color: $mm-text;
+}
+
+.mega-menu-category ul li.is-current > a,
+.mega-menu-links li.is-current > a,
+.mega-menu-category ul li a.is-current,
+.mega-menu-links li a.is-current {
+    color: $mm-text;
+    font-weight: 600;
+    text-decoration: underline;
+}
+
+.mega-menu-category ul li a:hover,
+.mega-menu-links li a:hover {
+    background: transparent;
+    color: $mm-text;
+    text-decoration: underline;
+}
+
+.mega-menu-category ul li a:focus,
+.mega-menu-links li a:focus {
+    background: $mm-focus-soft;
+    color: $mm-text;
+    box-shadow: 0 0 0 2px $mm-focus-accent;
+    outline: none;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+@media (max-width: 1024px) {
+    .mega-menu-grid {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    }
+
+    .mega-menu-category {
+        padding: 14px 16px 12px;
+    }
+}
+
+@media (max-width: 767px) {
+    .mega-menu-main > ul,
+    .mega-menu-top-level {
+        padding: 0 6px;
+        padding-inline-start: 6px;
+        flex-wrap: wrap;
+    }
+
+    .mega-menu-main > ul > li,
+    .mega-menu-top-item {
+        border-right: 0;
+    }
+
+    .mega-menu-main > ul > li > a,
+    .mega-menu-main > ul > li > span[role="menuitem"],
+    .menu-item-link,
+    .menu-item-text {
+        min-height: 36px;
+        padding: 0 10px;
+        font-size: 12px;
+    }
+
+    .mega-menu {
+        border-left: 0;
+        border-right: 0;
+    }
+
+    .mega-menu-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .mega-menu-category {
+        padding: 14px 12px;
+        border-right: 0;
+        border-bottom: 1px solid $mm-panel-divider;
+    }
+
+    .mega-menu-grid > .mega-menu-category:last-child {
+        border-bottom: 0;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .skip-link,
+    .menu-item-has-children::after,
+    .mega-menu-main > ul > li > a,
+    .mega-menu-main > ul > li > span[role="menuitem"],
+    .menu-item-link,
+    .menu-item-text,
+    .mega-menu,
+    .mega-menu-category ul li a,
+    .mega-menu-links li a {
+        transition: none;
+    }
+}
+
+@media (prefers-contrast: high) {
+    .mega-menu-main > ul > li > a:focus,
+    .mega-menu-main > ul > li > span[role="menuitem"]:focus,
+    .menu-item-link:focus,
+    .menu-item-text:focus,
+    .mega-menu-category > h3 > a:focus,
+    .mega-menu-category ul li a:focus,
+    .mega-menu-links li a:focus {
+        outline: 2px solid;
+        outline-offset: 2px;
+        box-shadow: none;
+    }
+}
+} /* End :global */
--- a/src/extensions/megaMenu/MegaMenu.module.scss.ts
+++ b/src/extensions/megaMenu/MegaMenu.module.scss.ts
@@ -0,0 +1,9 @@
+/* tslint:disable */
+require('./MegaMenu.module.css');
+const styles = {
+  mmSlideIn: 'mmSlideIn_09a8e1a7',
+  mmFadeIn: 'mmFadeIn_09a8e1a7',
+};
+
+export default styles;
+/* tslint:enable */
--- a/src/extensions/megaMenu/MegaMenuApplicationCustomizer.manifest.json
+++ b/src/extensions/megaMenu/MegaMenuApplicationCustomizer.manifest.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-extension-manifest.schema.json",
+
+  "id": "abc3361f-bb2d-491f-aba3-cd51c19a299b",
+  "alias": "MegaMenuApplicationCustomizer",
+  "componentType": "Extension",
+  "extensionType": "ApplicationCustomizer",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false
+}
--- a/src/extensions/megaMenu/MegaMenuApplicationCustomizer.ts
+++ b/src/extensions/megaMenu/MegaMenuApplicationCustomizer.ts
@@ -0,0 +1,158 @@
+// tslint:disable:max-line-length
+// tslint:disable:match-default-export-name
+// tslint:disable:typedef
+// tslint:disable:variable-name
+
+import { override } from '@microsoft/decorators';
+import {
+  BaseApplicationCustomizer,
+  PlaceholderContent,
+  PlaceholderName
+} from '@microsoft/sp-application-base';
+
+import * as strings from 'MegaMenuApplicationCustomizerStrings';
+import { TaxonomyNavigationService } from '../../services/TaxonomyNavigationService';
+import { MegaMenuRenderer } from './MegaMenuRenderer';
+import { IMenuItem } from '../../services/IMenuItem';
+import { debugError, debugLog, debugWarn } from '../../services/MegaMenuDebug';
+
+import './MegaMenu.module.scss';
+
+const LOG_SOURCE: string = 'MegaMenuApplicationCustomizer';
+export const UserCustomActionMegaMenuId: string = 'abc3361f-bb2d-491f-aba3-cd51c19a299b';
+
+export interface IMegaMenuApplicationCustomizerProperties {
+  termSetName: string;
+  cssUrl?: string;
+  debug?: boolean;
+}
+
+export default class MegaMenuApplicationCustomizer
+  extends BaseApplicationCustomizer<IMegaMenuApplicationCustomizerProperties> {
+
+  private _topPlaceholder: PlaceholderContent | undefined;
+
+  @override
+  public onInit(): Promise<void> {
+    debugLog(this._isDebugEnabled(), LOG_SOURCE, 'Initialized ' + strings.Title);
+
+    if (this.properties.cssUrl) {
+      this._loadExternalCss(this.properties.cssUrl);
+    }
+
+    this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
+    this._renderPlaceHolders();
+
+    return Promise.resolve();
+  }
+
+  private _renderPlaceHolders(): void {
+    const availablePlaceholders: string = this.context.placeholderProvider.placeholderNames
+      .map(name => PlaceholderName[name])
+      .join(', ');
+
+    debugLog(this._isDebugEnabled(), LOG_SOURCE, 'Available placeholders:', availablePlaceholders);
+
+    if (!this._topPlaceholder) {
+      this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
+        PlaceholderName.Top,
+        { onDispose: this._onDispose }
+      );
+
+      if (!this._topPlaceholder) {
+        debugError(this._isDebugEnabled(), LOG_SOURCE, 'The expected placeholder (Top) was not found.');
+        return;
+      }
+
+      if (!this.properties.termSetName) {
+        debugWarn(this._isDebugEnabled(), LOG_SOURCE, 'No termSetName configured. Mega Menu rendering is skipped.');
+        return;
+      }
+
+      this._renderMegaMenu(this.properties.termSetName);
+    }
+  }
+
+  private async _renderMegaMenu(termSetName: string, debug: boolean = this._isDebugEnabled()): Promise<void> {
+    if (!this._topPlaceholder) {
+      return;
+    }
+
+    try {
+      const taxonomyService: TaxonomyNavigationService = new TaxonomyNavigationService(
+        this.context,
+        termSetName,
+        debug
+      );
+
+      const menuItems: IMenuItem[] = await taxonomyService.getMenuItems();
+
+      const renderer: MegaMenuRenderer = new MegaMenuRenderer(
+        menuItems,
+        debug
+      );
+
+      const container = this._getOrCreateContainer('CustomHeader', this._topPlaceholder);
+
+      if (container) {
+        renderer.render(container);
+      } else {
+        renderer.render(this._topPlaceholder.domElement);
+      }
+
+      debugLog(debug, LOG_SOURCE, 'MegaMenu rendered successfully with ' + menuItems.length + ' top-level items.');
+    } catch (error) {
+      debugError(debug, LOG_SOURCE, 'Error rendering MegaMenu.', error);
+    }
+  }
+
+  private _getOrCreateContainer(id: string, placeholder: PlaceholderContent): HTMLElement {
+    const container = document.getElementById(id);
+
+    if (container) {
+      const div = document.createElement('div');
+      container.appendChild(div);
+      return div;
+    }
+
+    return placeholder.domElement;
+  }
+
+  private _loadExternalCss(cssUrl?: string, debug: boolean = this._isDebugEnabled()): void {
+    const externalCssLinkId: string = 'mega-menu-additional-css-34FAB720';
+    let link: HTMLLinkElement = document.getElementById(externalCssLinkId) as HTMLLinkElement;
+
+    if (cssUrl && cssUrl.trim() !== '') {
+      if (!link) {
+        const head: HTMLHeadElement = document.getElementsByTagName('head')[0];
+        link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.type = 'text/css';
+        link.id = externalCssLinkId;
+        link.onload = () => {
+          debugLog(debug, LOG_SOURCE, 'External CSS loaded successfully from:', cssUrl);
+        };
+        link.onerror = () => {
+          debugWarn(debug, LOG_SOURCE, 'Failed to load external CSS from:', cssUrl);
+        };
+        head.appendChild(link);
+      }
+
+      link.href = cssUrl;
+    } else if (link) {
+      link.remove();
+    }
+  }
+
+  private _onDispose = (): void => {
+    debugLog(this._isDebugEnabled(), LOG_SOURCE, 'Disposed custom top placeholder.');
+  }
+
+  private _isDebugEnabled(debugOverride?: boolean): boolean {
+    if (typeof debugOverride === 'boolean') {
+      return debugOverride;
+    }
+
+    return !!(this.properties && this.properties.debug === true);
+  }
+}
--- a/src/extensions/megaMenu/MegaMenuRenderer.ts
+++ b/src/extensions/megaMenu/MegaMenuRenderer.ts
@@ -0,0 +1,510 @@
+// tslint:disable:max-line-length
+// tslint:disable:match-default-export-name
+// tslint:disable:typedef
+// tslint:disable:variable-name
+
+import { IMenuItem } from '../../services/IMenuItem';
+import { debugLog } from '../../services/MegaMenuDebug';
+
+import styles from './MegaMenu.module.scss'; // tslint:disable-line:no-unused-variable
+
+const LOG_SOURCE: string = 'MegaMenuRenderer';
+
+export class MegaMenuRenderer {
+    private static readonly hoverOpenDelayMs: number = 140;
+    private static readonly hoverCloseDelayMs: number = 180;
+
+    constructor(
+        private menuItems: IMenuItem[],
+        private debug: boolean = false
+    ) { }
+
+    public render(container: HTMLElement) {
+        container.innerHTML = '';
+        container.id = 'CustomNavigation';
+
+        const nav = document.createElement('nav');
+        nav.id = 'Mega-Menu';
+        nav.className = 'mega-menu-main';
+        nav.setAttribute('role', 'navigation');
+        nav.setAttribute('aria-label', 'Hauptnavigation');
+
+        const topLevelUl = document.createElement('ul');
+        topLevelUl.className = 'mega-menu-top-level';
+        topLevelUl.setAttribute('role', 'menubar');
+
+        this.menuItems.forEach(topLevelItem => {
+            const topLevelLi = this.createTopLevelItem(topLevelItem);
+            topLevelUl.appendChild(topLevelLi);
+        });
+
+        nav.appendChild(topLevelUl);
+        container.appendChild(nav);
+
+        this.attachEventListeners();
+        this.createScreenReaderAnnouncer();
+    }
+
+    private createTopLevelItem(item: IMenuItem): HTMLLIElement {
+        const li = document.createElement('li');
+        const hasChildren = item.hasChildren() && item.items && item.items.length > 0;
+        const isActive = this.isItemActive(item);
+        const isCurrent = this.isCurrentUrl(item.url);
+
+        li.className = this.joinClasses(
+            'mega-menu-top-item',
+            hasChildren ? 'has-children' : undefined,
+            isActive ? 'is-active' : undefined,
+            isCurrent ? 'is-current' : undefined
+        );
+        li.setAttribute('role', 'none');
+
+        const topElement = this.createTopLevelElement(item, hasChildren, isActive, isCurrent);
+        li.appendChild(topElement);
+
+        if (hasChildren) {
+            const megaMenu = this.createMegaMenu(item);
+            li.appendChild(megaMenu);
+        }
+
+        return li;
+    }
+
+    private createTopLevelElement(item: IMenuItem, hasChildren: boolean, isActive: boolean, isCurrent: boolean): HTMLElement {
+        let element: HTMLElement;
+
+        if (item.url) {
+            element = document.createElement('a');
+            (element as HTMLAnchorElement).href = item.url;
+            element.className = 'menu-item-link';
+        } else {
+            element = document.createElement('span');
+            element.className = 'menu-item-text';
+            element.setAttribute('tabindex', '0');
+        }
+
+        element.setAttribute('role', 'menuitem');
+        element.textContent = item.label;
+        element.className = this.joinClasses(
+            element.className,
+            hasChildren ? 'menu-item-has-children' : undefined,
+            isActive ? 'is-active' : undefined,
+            isCurrent ? 'is-current' : undefined
+        );
+
+        if (hasChildren) {
+            element.setAttribute('aria-haspopup', 'true');
+            element.setAttribute('aria-expanded', 'false');
+        }
+
+        if (isCurrent && item.url) {
+            element.setAttribute('aria-current', 'page');
+        }
+
+        if (item.hoverText) {
+            element.title = item.hoverText;
+        }
+
+        return element;
+    }
+
+    private createMegaMenu(parentItem: IMenuItem): HTMLDivElement {
+        const megaMenuDiv = document.createElement('div');
+        megaMenuDiv.className = 'mega-menu';
+        megaMenuDiv.setAttribute('role', 'menu');
+        megaMenuDiv.setAttribute('aria-expanded', 'false');
+        megaMenuDiv.setAttribute('aria-label', parentItem.label + ' Unterkategorien');
+
+        const gridDiv = document.createElement('div');
+        gridDiv.className = 'mega-menu-grid';
+        gridDiv.style.setProperty('--megaMenuColumnCount', this.getColumnCount(parentItem.items));
+
+        if (parentItem.items) {
+            parentItem.items.forEach(secondLevelItem => {
+                const categoryDiv = this.createCategorySection(secondLevelItem);
+                gridDiv.appendChild(categoryDiv);
+            });
+        }
+
+        megaMenuDiv.appendChild(gridDiv);
+        return megaMenuDiv;
+    }
+
+    private createCategorySection(item: IMenuItem): HTMLDivElement {
+        const categoryDiv = document.createElement('div');
+        const isActive = this.isItemActive(item);
+        const isCurrent = this.isCurrentUrl(item.url);
+        categoryDiv.className = this.joinClasses(
+            'mega-menu-category',
+            isActive ? 'is-active' : undefined,
+            isCurrent ? 'is-current' : undefined
+        );
+
+        const h3 = document.createElement('h3');
+        h3.className = 'mega-menu-category-title';
+
+        if (item.url) {
+            const link = document.createElement('a');
+            link.href = item.url;
+            link.textContent = item.label;
+            link.className = this.joinClasses(
+                isActive ? 'is-active' : undefined,
+                isCurrent ? 'is-current' : undefined
+            );
+            if (isCurrent) {
+                link.setAttribute('aria-current', 'page');
+            }
+            if (item.hoverText) {
+                link.title = item.hoverText;
+            }
+            h3.appendChild(link);
+        } else {
+            const span = document.createElement('span');
+            span.textContent = item.label;
+            span.className = this.joinClasses(
+                isActive ? 'is-active' : undefined
+            );
+            if (item.hoverText) {
+                span.title = item.hoverText;
+            }
+            h3.appendChild(span);
+        }
+
+        categoryDiv.appendChild(h3);
+
+        if (item.hasChildren() && item.items && item.items.length > 0) {
+            const ul = document.createElement('ul');
+            ul.className = 'mega-menu-links';
+
+            item.items.forEach(thirdLevelItem => {
+                const li = document.createElement('li');
+                const link = document.createElement('a');
+                const isLinkActive = this.isItemActive(thirdLevelItem);
+                const isLinkCurrent = this.isCurrentUrl(thirdLevelItem.url);
+
+                li.className = this.joinClasses(
+                    isLinkActive ? 'is-active' : undefined,
+                    isLinkCurrent ? 'is-current' : undefined
+                );
+
+                link.href = thirdLevelItem.url || '#';
+                link.textContent = thirdLevelItem.label;
+                link.className = this.joinClasses(
+                    isLinkActive ? 'is-active' : undefined,
+                    isLinkCurrent ? 'is-current' : undefined
+                );
+
+                if (isLinkCurrent && thirdLevelItem.url) {
+                    link.setAttribute('aria-current', 'page');
+                }
+
+                if (thirdLevelItem.hoverText) {
+                    link.title = thirdLevelItem.hoverText;
+                }
+
+                li.appendChild(link);
+                ul.appendChild(li);
+            });
+
+            categoryDiv.appendChild(ul);
+        }
+
+        return categoryDiv;
+    }
+
+    private attachEventListeners(): void {
+        const headings = document.querySelectorAll('#Mega-Menu > ul > li > a, #Mega-Menu > ul > li > span[role="menuitem"]');
+
+        for (let i = 0; i < headings.length; i++) {
+            const heading = headings[i] as HTMLElement;
+            const megaMenu = heading.nextElementSibling as HTMLElement;
+
+            if (megaMenu && megaMenu.classList.contains('mega-menu')) {
+                this.attachKeyboardNavigation(heading, megaMenu);
+                this.attachMouseEvents(heading, megaMenu);
+                this.attachFocusManagement(heading, megaMenu);
+            }
+        }
+
+        this.attachGlobalKeyboardNavigation();
+    }
+
+    private attachKeyboardNavigation(heading: HTMLElement, megaMenu: HTMLElement): void {
+        heading.addEventListener('keydown', (e: KeyboardEvent) => {
+            if (e.key === 'Enter') {
+                if (heading.tagName === 'A') {
+                    return;
+                }
+
+                e.preventDefault();
+                this.toggleMegaMenu(heading, megaMenu);
+            } else if (e.key === ' ') {
+                e.preventDefault();
+                this.toggleMegaMenu(heading, megaMenu);
+            } else if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.openMegaMenu(heading, megaMenu);
+                this.focusFirstLink(megaMenu);
+            } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this.closeMegaMenu(heading, megaMenu);
+            } else if (e.key === 'Escape') {
+                e.preventDefault();
+                this.closeMegaMenu(heading, megaMenu);
+                heading.focus();
+            }
+        });
+
+        if (heading.tagName === 'A') {
+            heading.addEventListener('click', () => {
+                debugLog(this.debug, LOG_SOURCE, 'Link clicked:', (heading as HTMLAnchorElement).href);
+            });
+        }
+
+        heading.addEventListener('focus', () => {
+            debugLog(this.debug, LOG_SOURCE, 'Focus moved to:', heading.textContent);
+        });
+    }
+
+    private attachMouseEvents(heading: HTMLElement, megaMenu: HTMLElement): void {
+        const parentLi = heading.parentElement as HTMLElement;
+        let openTimeout: number | undefined;
+        let closeTimeout: number | undefined;
+
+        const clearOpenTimeout = () => {
+            if (typeof openTimeout === 'number') {
+                window.clearTimeout(openTimeout);
+                openTimeout = undefined;
+            }
+        };
+
+        const clearCloseTimeout = () => {
+            if (typeof closeTimeout === 'number') {
+                window.clearTimeout(closeTimeout);
+                closeTimeout = undefined;
+            }
+        };
+
+        parentLi.addEventListener('mouseenter', () => {
+            clearCloseTimeout();
+
+            if (megaMenu.classList.contains('js-open')) {
+                return;
+            }
+
+            clearOpenTimeout();
+            openTimeout = window.setTimeout(() => {
+                this.openMegaMenu(heading, megaMenu);
+                openTimeout = undefined;
+            }, MegaMenuRenderer.hoverOpenDelayMs);
+        });
+
+        parentLi.addEventListener('mouseleave', () => {
+            clearOpenTimeout();
+            clearCloseTimeout();
+            closeTimeout = window.setTimeout(() => {
+                this.closeMegaMenu(heading, megaMenu);
+                closeTimeout = undefined;
+            }, MegaMenuRenderer.hoverCloseDelayMs);
+        });
+
+        heading.addEventListener('focus', () => {
+            clearCloseTimeout();
+        });
+
+        megaMenu.addEventListener('mouseenter', () => {
+            clearCloseTimeout();
+        });
+    }
+
+    private attachFocusManagement(heading: HTMLElement, megaMenu: HTMLElement): void {
+        megaMenu.addEventListener('focusout', () => {
+            setTimeout(() => {
+                const focusedElement = document.activeElement as HTMLElement;
+                const isInsideThisMenu = megaMenu.contains(focusedElement);
+                const isOnThisTrigger = focusedElement === heading;
+                const isInAnyMegaMenu = focusedElement.closest('.mega-menu');
+                const isOnAnyTopLevel = focusedElement.closest('#Mega-Menu > ul > li > a, #Mega-Menu > ul > li > span');
+
+                if (!isInsideThisMenu && !isOnThisTrigger && !isInAnyMegaMenu && !isOnAnyTopLevel) {
+                    debugLog(this.debug, LOG_SOURCE, 'Closing menu because focus left the navigation.');
+                    this.closeMegaMenu(heading, megaMenu);
+                }
+            }, 150);
+        });
+    }
+
+    private attachGlobalKeyboardNavigation(): void {
+        document.addEventListener('keydown', (e: KeyboardEvent) => {
+            const activeElement = document.activeElement as HTMLElement;
+
+            if (e.key === 'Escape') {
+                const openMenu = document.querySelector('.mega-menu[aria-expanded="true"]') as HTMLElement;
+                if (openMenu) {
+                    const triggerLink = openMenu.previousElementSibling as HTMLElement;
+                    this.closeMegaMenu(triggerLink, openMenu);
+                    triggerLink.focus();
+                }
+            }
+
+            if (e.key === 'Tab') {
+                if (!e.shiftKey) {
+                    const currentTopLevel = activeElement.closest('#Mega-Menu > ul > li > a, #Mega-Menu > ul > li > span') as HTMLElement;
+                    if (currentTopLevel) {
+                        const parentLi = currentTopLevel.closest('li') as HTMLElement;
+                        const megaMenu = parentLi.querySelector('.mega-menu.js-open') as HTMLElement;
+                        if (megaMenu) {
+                            e.preventDefault();
+                            const firstLink = megaMenu.querySelector('a') as HTMLElement;
+                            if (firstLink) {
+                                firstLink.focus();
+                            }
+                            return;
+                        }
+                    }
+                }
+
+                if (e.shiftKey) {
+                    const megaMenu = activeElement.closest('.mega-menu') as HTMLElement;
+                    if (megaMenu && megaMenu.classList.contains('js-open')) {
+                        const allLinksInMenu = megaMenu.querySelectorAll('a');
+                        const firstLinkInMenu = allLinksInMenu[0] as HTMLElement;
+
+                        if (activeElement === firstLinkInMenu) {
+                            e.preventDefault();
+                            const triggerElement = megaMenu.previousElementSibling as HTMLElement;
+                            triggerElement.focus();
+                            return;
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    private openMegaMenu(trigger: HTMLElement, menu: HTMLElement): void {
+        this.closeAllMegaMenus(menu);
+        trigger.setAttribute('aria-expanded', 'true');
+        menu.setAttribute('aria-expanded', 'true');
+        menu.classList.add('js-open');
+        debugLog(this.debug, LOG_SOURCE, 'Menu opened:', trigger.textContent);
+    }
+
+    private closeMegaMenu(trigger: HTMLElement, menu: HTMLElement): void {
+        trigger.setAttribute('aria-expanded', 'false');
+        menu.setAttribute('aria-expanded', 'false');
+        menu.classList.remove('js-open');
+        debugLog(this.debug, LOG_SOURCE, 'Menu closed:', trigger.textContent);
+    }
+
+    private toggleMegaMenu(trigger: HTMLElement, menu: HTMLElement): void {
+        const isOpen = trigger.getAttribute('aria-expanded') === 'true';
+        if (isOpen) {
+            this.closeMegaMenu(trigger, menu);
+        } else {
+            this.openMegaMenu(trigger, menu);
+        }
+    }
+
+    private closeAllMegaMenus(exceptMenu?: HTMLElement): void {
+        const allTriggers = document.querySelectorAll('#Mega-Menu > ul > li > a[aria-expanded="true"], #Mega-Menu > ul > li > span[aria-expanded="true"]');
+        for (let i = 0; i < allTriggers.length; i++) {
+            const trigger = allTriggers[i] as HTMLElement;
+            const menu = trigger.nextElementSibling as HTMLElement;
+            if (menu && menu !== exceptMenu) {
+                this.closeMegaMenu(trigger, menu);
+            }
+        }
+    }
+
+    private focusFirstLink(megaMenu: HTMLElement): void {
+        const firstLink = megaMenu.querySelector('a') as HTMLElement;
+        if (firstLink) {
+            firstLink.focus();
+        }
+    }
+
+    private isItemActive(item: IMenuItem): boolean {
+        if (this.isCurrentUrl(item.url)) {
+            return true;
+        }
+
+        if (!item.items || item.items.length === 0) {
+            return false;
+        }
+
+        for (let i = 0; i < item.items.length; i++) {
+            if (this.isItemActive(item.items[i])) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    private isCurrentUrl(url?: string): boolean {
+        const currentPath = this.normalizePath(window.location.href);
+        const itemPath = this.normalizePath(url);
+
+        if (!currentPath || !itemPath) {
+            return false;
+        }
+
+        if (itemPath === '/') {
+            return currentPath === '/';
+        }
+
+        if (currentPath === itemPath) {
+            return true;
+        }
+
+        return currentPath.indexOf(itemPath + '/') === 0;
+    }
+
+    private normalizePath(url?: string): string {
+        if (!url) {
+            return '';
+        }
+
+        try {
+            const parsedUrl = new URL(url, window.location.origin);
+            const pathname = (parsedUrl.pathname || '/').replace(/\/+$/, '');
+            return (pathname || '/').toLowerCase();
+        } catch (error) {
+            return '';
+        }
+    }
+
+    private getColumnCount(items?: IMenuItem[]): string {
+        const itemCount = items ? items.length : 0;
+        const columnCount = Math.min(Math.max(itemCount, 1), 4);
+        return columnCount.toString();
+    }
+
+    private joinClasses(...classNames: Array<string | undefined>): string {
+        const filteredClassNames: string[] = [];
+
+        for (let i = 0; i < classNames.length; i++) {
+            if (classNames[i]) {
+                filteredClassNames.push(classNames[i] as string);
+            }
+        }
+
+        return filteredClassNames.join(' ');
+    }
+
+    private createScreenReaderAnnouncer(): void {
+        if (document.getElementById('mega-menu-sr-announcer')) {
+            return;
+        }
+
+        const srAnnouncer = document.createElement('div');
+        srAnnouncer.id = 'mega-menu-sr-announcer';
+        srAnnouncer.setAttribute('aria-live', 'polite');
+        srAnnouncer.setAttribute('aria-atomic', 'true');
+        srAnnouncer.className = 'sr-only';
+        document.body.appendChild(srAnnouncer);
+
+        debugLog(this.debug, LOG_SOURCE, 'Screen reader announcer is ready.');
+    }
+}
--- a/src/extensions/megaMenu/MegaMenuSettings.ts
+++ b/src/extensions/megaMenu/MegaMenuSettings.ts
@@ -0,0 +1,210 @@
+// tslint:disable:max-line-length export-name
+
+import { ApplicationCustomizerContext } from '@microsoft/sp-application-base';
+import { IMegaMenuApplicationCustomizerProperties, UserCustomActionMegaMenuId } from './MegaMenuApplicationCustomizer';
+import { UserCustomActionService } from '../../services/UserCustomActionService/UserCustomActionService';
+import { UserCustomActionScope } from '../../services/UserCustomActionService/UserCustomActionScope';
+import { IUserCustomActionProps } from '../../services/UserCustomActionService/IUserCustomActionProps';
+import { debugError } from '../../services/MegaMenuDebug';
+
+const LOG_SOURCE: string = 'MegaMenuSettingsPanel';
+
+export class MegaMenuSettingsPanel {
+    private _service: UserCustomActionService;
+    private _ucaId: string;
+    private _panelElement: HTMLElement | undefined = undefined;
+    private _overlayElement: HTMLElement | undefined = undefined;
+
+    constructor(
+        private context: ApplicationCustomizerContext,
+        private dataUpdated: (data: IMegaMenuApplicationCustomizerProperties) => void,
+        private debug: boolean = false
+    ) {
+        this._service = new UserCustomActionService(this.context, this.debug);
+    }
+
+    public async open(): Promise<void> {
+        if (this._panelElement) {
+            return;
+        }
+
+        const currentProps: IMegaMenuApplicationCustomizerProperties = await this.readApplicationCustomizerProps();
+        this._createPanel(currentProps);
+    }
+
+    public close(): void {
+        if (this._panelElement) {
+            this._panelElement.remove();
+            this._panelElement = undefined;
+        }
+
+        if (this._overlayElement) {
+            this._overlayElement.remove();
+            this._overlayElement = undefined;
+        }
+
+        document.body.focus();
+        document.body.blur();
+    }
+
+    private async readApplicationCustomizerProps(): Promise<IMegaMenuApplicationCustomizerProperties> {
+        const ucas: IUserCustomActionProps[] = await this._service.getUserCustomActions(UserCustomActionScope.Site);
+        const candidates: IUserCustomActionProps[] = ucas.filter(uca => uca.ClientSideComponentId === UserCustomActionMegaMenuId);
+
+        if (candidates.length) {
+            const uca: IUserCustomActionProps = candidates[0];
+            this._ucaId = uca.Id;
+
+            if (uca.ClientSideComponentProperties) {
+                return JSON.parse(uca.ClientSideComponentProperties) as IMegaMenuApplicationCustomizerProperties;
+            }
+
+            return {
+                termSetName: '',
+                cssUrl: '',
+                debug: false
+            };
+        }
+
+        debugError(this.debug, LOG_SOURCE, 'UserCustomAction for the MegaMenu was not found.');
+        return {
+            termSetName: '',
+            cssUrl: '',
+            debug: false
+        };
+    }
+
+    private async saveApplicationCustomizerProps(componentProps: IMegaMenuApplicationCustomizerProperties): Promise<void> {
+        try {
+            const newUserCustomActionsProperty: {} = {
+                ClientSideComponentProperties: JSON.stringify(componentProps)
+            };
+
+            await this._service.updateUserCustomAction(UserCustomActionScope.Site, this._ucaId, newUserCustomActionsProperty);
+            this.debug = componentProps.debug === true;
+            this._service = new UserCustomActionService(this.context, this.debug);
+            this.dataUpdated(componentProps);
+        } catch (e) {
+            debugError(this.debug, LOG_SOURCE, 'Error saving MegaMenu settings.', e);
+        }
+    }
+
+    private _createPanel(props: IMegaMenuApplicationCustomizerProperties): void {
+        const overlay: HTMLElement = document.createElement('div');
+        overlay.className = 'mm-settings-overlay';
+        overlay.tabIndex = -1;
+        overlay.onclick = () => this.close();
+        this._overlayElement = overlay;
+
+        const panel: HTMLElement = document.createElement('div');
+        panel.className = 'mm-settings-panel';
+        panel.setAttribute('role', 'dialog');
+        panel.setAttribute('aria-modal', 'true');
+        panel.setAttribute('aria-label', 'MegaMenu Einstellungen');
+        panel.innerHTML = this._getMarkup(props.termSetName, props.cssUrl || '', props.debug === true);
+        this._panelElement = panel;
+
+        document.body.appendChild(overlay);
+        document.body.appendChild(panel);
+
+        const closeBtn: HTMLButtonElement = panel.querySelector('.mm-settings-close') as HTMLButtonElement;
+        const cancelBtn: HTMLButtonElement = panel.querySelector('.mm-settings-cancel') as HTMLButtonElement;
+        const saveBtn: HTMLButtonElement = panel.querySelector('.mm-settings-save') as HTMLButtonElement;
+        const firstInput: HTMLInputElement = panel.querySelector('#mm-setting-termset') as HTMLInputElement;
+
+        if (closeBtn) { closeBtn.onclick = () => this.close(); }
+        if (cancelBtn) { cancelBtn.onclick = () => this.close(); }
+        if (saveBtn) { saveBtn.onclick = () => this._save(); }
+
+        panel.addEventListener('keydown', (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.close();
+            } else if (e.key === 'Tab') {
+                this._trapFocus(e);
+            }
+        });
+
+        setTimeout(() => {
+            if (firstInput) {
+                firstInput.focus();
+            }
+        }, 0);
+    }
+
+    private _getMarkup(termSet: string, cssUrl: string, debug: boolean): string {
+        return `<div class='mm-settings-header'>
+            <h2 class='mm-settings-title'>Einstellungen</h2>
+            <button type='button' class='mm-settings-close' aria-label='Schliessen'>&times;</button>
+            </div>
+            <div class='mm-settings-body'>
+              <div class='mm-settings-field'>
+                <label for='mm-setting-termset'>Name des Navigations-Termsets</label>
+                <input id='mm-setting-termset' type='text' value='${this._escape(termSet)}' />
+              </div>
+              <div class='mm-settings-field'>
+                <label for='mm-setting-css'>Pfad zu zusaetzlicher CSS-Datei</label>
+                <input id='mm-setting-css' type='text' value='${this._escape(cssUrl)}' />
+              </div>
+              <div class='mm-settings-field'>
+                <label for='mm-setting-debug'>
+                  <input id='mm-setting-debug' type='checkbox' ${debug ? 'checked' : ''} />
+                  Debug-Ausgaben in der Browser-Konsole aktivieren
+                </label>
+              </div>
+            </div>
+            <div class='mm-settings-footer'>
+              <button type='button' class='mm-settings-save ms-Button ms-Button--primary'><span>Speichern</span></button>
+              <button type='button' class='mm-settings-cancel ms-Button'><span>Abbrechen</span></button>
+            </div>`;
+    }
+
+    private _save(): void {
+        if (!this._panelElement) {
+            return;
+        }
+
+        const termSetInput: HTMLInputElement = this._panelElement.querySelector('#mm-setting-termset') as HTMLInputElement;
+        const cssInput: HTMLInputElement = this._panelElement.querySelector('#mm-setting-css') as HTMLInputElement;
+        const debugInput: HTMLInputElement = this._panelElement.querySelector('#mm-setting-debug') as HTMLInputElement;
+
+        this.saveApplicationCustomizerProps({
+            termSetName: termSetInput && termSetInput.value ? termSetInput.value : '',
+            cssUrl: cssInput && cssInput.value ? cssInput.value : '',
+            debug: !!(debugInput && debugInput.checked)
+        });
+
+        this.close();
+    }
+
+    private _trapFocus(e: KeyboardEvent): void {
+        if (!this._panelElement) {
+            return;
+        }
+
+        const focusable: NodeListOf<Element> = this._panelElement.querySelectorAll('button, input');
+        if (!focusable || focusable.length === 0) {
+            return;
+        }
+
+        const first: HTMLElement = focusable[0] as HTMLElement;
+        const last: HTMLElement = focusable[focusable.length - 1] as HTMLElement;
+        const active: HTMLElement = document.activeElement as HTMLElement;
+
+        if (e.shiftKey && active === first) {
+            e.preventDefault();
+            last.focus();
+        } else if (!e.shiftKey && active === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    }
+
+    private _escape(value: string): string {
+        if (value) {
+            return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        }
+
+        return '';
+    }
+}
--- a/src/extensions/megaMenu/loc/en-us.js
+++ b/src/extensions/megaMenu/loc/en-us.js
@@ -0,0 +1,5 @@
+define([], function() {
+  return {
+    "Title": "MegaMenuApplicationCustomizer"
+  }
+});
--- a/src/extensions/megaMenu/loc/myStrings.d.ts
+++ b/src/extensions/megaMenu/loc/myStrings.d.ts
@@ -0,0 +1,8 @@
+declare interface IMegaMenuApplicationCustomizerStrings {
+  Title: string;
+}
+
+declare module 'MegaMenuApplicationCustomizerStrings' {
+  const myStrings: IMegaMenuApplicationCustomizerStrings;
+  export = myStrings;
+}
--- a/src/index.ts
+++ b/src/index.ts
@@ -0,0 +1,20 @@
+// tslint:disable:max-line-length no-any
+// A file is required to be in the root of the /src directory by the TypeScript compiler
+
+// Export services for classic SharePoint usage
+export { TaxonomyNavigationService } from './services/TaxonomyNavigationService';
+export { MegaMenuRenderer } from './extensions/megaMenu/MegaMenuRenderer';
+export { UserCustomActionService } from './services/UserCustomActionService/UserCustomActionService';
+export { UserCustomActionScope } from './services/UserCustomActionService/UserCustomActionScope';
+
+// Expose services globally for classic JavaScript consumption
+declare var window: any;
+
+if (typeof window !== 'undefined') {
+    window.__megaMenuServices = {
+        TaxonomyNavigationService: require('./services/TaxonomyNavigationService').TaxonomyNavigationService,
+        MegaMenuRenderer: require('./extensions/megaMenu/MegaMenuRenderer').MegaMenuRenderer,
+        UserCustomActionService: require('./services/UserCustomActionService/UserCustomActionService').UserCustomActionService,
+        UserCustomActionScope: require('./services/UserCustomActionService/UserCustomActionScope').UserCustomActionScope
+    };
+}
--- a/src/services/IMenuItem.ts
+++ b/src/services/IMenuItem.ts
@@ -0,0 +1,10 @@
+export interface IMenuItem {
+    id: string; // Guid;
+    label: string;
+    icon?: string;
+    hoverText: string;
+    url?: string;
+    pathDepth: number;
+    items?: IMenuItem[];
+    hasChildren: () => boolean;
+}
--- a/src/services/IPickerTerm.ts
+++ b/src/services/IPickerTerm.ts
@@ -0,0 +1,9 @@
+export interface IPickerTerm {
+  name: string;
+  key: string;
+  path: string;
+  termSet: string;
+  termSetName?: string;
+}
+
+export interface IPickerTerms extends Array<IPickerTerm> { }
--- a/src/services/ISPTermStorePickerService.ts
+++ b/src/services/ISPTermStorePickerService.ts
@@ -0,0 +1,94 @@
+// tslint:disable:no-any
+/**
+ * Interfaces for Term store, groups and term sets
+ * This code is a copy from the library @pnp/sp-dev-fx-controls-react
+ */
+export interface ITermStore {
+  _ObjectType_: string; // SP.Taxonomy.TermStore
+  _ObjectIdentity_: string;
+  Id: string;
+  Name: string;
+  Groups: IGroups;
+}
+
+export interface IGroups {
+  _ObjectType_: string; // SP.Taxonomy.TermGroupCollection
+  _Child_Items_: IGroup[];
+}
+
+export interface IGroup {
+  _ObjectType_: string; // SP.Taxonomy.TermGroup
+  _ObjectIdentity_: string;
+  TermSets: ITermSets;
+  Id: string;
+  Name: string;
+  IsSystemGroup: boolean;
+}
+
+export interface ITermSets {
+  _ObjectType_: string; // SP.Taxonomy.TermSetCollection
+  _Child_Items_: ITermSet[];
+}
+
+export interface ITermSet {
+  _ObjectType_: string; // SP.Taxonomy.TermSet
+  _ObjectIdentity_: string;
+  Id: string;
+  CustomSortOrder?: string;
+  Name: string;
+  Description: string;
+  Names: ITermSetNames;
+  Terms?: ITerm[];
+}
+
+export interface ITermSetMinimal {
+  _ObjectType_?: string; // SP.Taxonomy.TermSet
+  _ObjectIdentity_?: string;
+  Id: string;
+  Name: string;
+}
+
+export interface ITermSetNames {
+  [locale: string]: string;
+}
+
+/**
+ * Interfaces for the terms
+ */
+export interface ITerms {
+  _ObjectType_: string; // SP.Taxonomy.TermCollection
+  _Child_Items_: ITerm[];
+}
+
+/**
+ * Term
+ */
+export interface ITerm {
+  _ObjectType_: string; // SP.Taxonomy.Term
+  _ObjectIdentity_: string;
+  Id: string;
+  Name: string;
+  Description: string;
+  IsDeprecated: boolean;
+  IsAvailableForTagging: boolean;
+  IsRoot: boolean;
+  PathOfTerm: string;
+  TermSet: ITermSetMinimal;
+  CustomSortOrderIndex?: number;
+  PathDepth?: number;
+  ParentId?: string;
+  TermsCount?: number;
+  LocalCustomProperties?: {
+    [property: string]: any
+  };
+}
+
+export interface ISuggestTerm {
+  Id: string;
+  DefaultLabel: string;
+  Description: string;
+  IsKeyword: boolean;
+  IsSynonym: boolean;
+  Paths: Array<string>;
+  Synonyms: string;
+}
--- a/src/services/ISPTermStorePickerServiceProps.ts
+++ b/src/services/ISPTermStorePickerServiceProps.ts
@@ -0,0 +1,7 @@
+export interface ISPTermStorePickerServiceProps {
+    termsetNameOrID: string;
+    useSessionStorage: boolean;
+    hideDeprecatedTags: boolean;
+    hideTagsNotAvailableForTagging: boolean;
+    anchorId: string;
+}
--- a/src/services/ITaxonomyNavigationService.ts
+++ b/src/services/ITaxonomyNavigationService.ts
@@ -0,0 +1,5 @@
+import { IMenuItem } from './IMenuItem';
+
+export interface ITaxonomyNavigationService {
+    getMenuItems(): Promise<IMenuItem[]>;
+}
--- a/src/services/ItemDictionary.ts
+++ b/src/services/ItemDictionary.ts
@@ -0,0 +1,9 @@
+export class ItemDictionary<T> {
+    public Get(key: string): T {
+        return this[key];
+    }
+
+    public Add(key: string, value: T): void {
+        this[key] = value;
+    }
+}
--- a/src/services/MegaMenuDebug.ts
+++ b/src/services/MegaMenuDebug.ts
@@ -0,0 +1,26 @@
+export function debugLog(enabled: boolean, source: string, message: string, ...args: any[]): void {
+    if (!enabled) {
+        return;
+    }
+
+    const output: any[] = ['[' + source + '] ' + message].concat(args || []);
+    console.log.apply(console, output);
+}
+
+export function debugWarn(enabled: boolean, source: string, message: string, ...args: any[]): void {
+    if (!enabled) {
+        return;
+    }
+
+    const output: any[] = ['[' + source + '] ' + message].concat(args || []);
+    console.warn.apply(console, output);
+}
+
+export function debugError(enabled: boolean, source: string, message: string, ...args: any[]): void {
+    if (!enabled) {
+        return;
+    }
+
+    const output: any[] = ['[' + source + '] ' + message].concat(args || []);
+    console.error.apply(console, output);
+}
--- a/src/services/MenuItem.ts
+++ b/src/services/MenuItem.ts
@@ -0,0 +1,37 @@
+// tslint:disable:no-any no-string-literal max-line-length
+
+import { IMenuItem } from './IMenuItem';
+import { ITerm } from './ISPTermStorePickerService';
+
+export class MenuItem implements IMenuItem {
+    public id: string;
+    public label: string;
+    public hoverText: string;
+    public pathDepth: number;
+    public url?: string;
+    public items?: IMenuItem[];
+
+    constructor(term: ITerm, public level: number, siteCollectionUrl?: string) {
+        this.id = term.Id;
+        this.label = term.Name;
+        this.hoverText = term.LocalCustomProperties['_Sys_Nav_HoverText'];
+        this.pathDepth = term.PathDepth;
+        const rawUrl: string = term.LocalCustomProperties['_Sys_Nav_SimpleLinkUrl'] || term.LocalCustomProperties['_Sys_Nav_TargetUrl'];
+        if (rawUrl) {
+            this.url = siteCollectionUrl && rawUrl.indexOf('~sitecollection') === 0
+                ? siteCollectionUrl + rawUrl.substring('~sitecollection'.length)
+                : rawUrl;
+        }
+        this.items = [];
+    }
+
+    public hasChildren(): boolean {
+        return this.items && this.items.length > 0;
+    }
+
+    public command(): void {
+        if (this.url) {
+            (window as any).location.href = this.url;
+        }
+    }
+}
--- a/src/services/MockTaxonomyNavigationService.ts
+++ b/src/services/MockTaxonomyNavigationService.ts
@@ -0,0 +1,106 @@
+import { IMenuItem } from './IMenuItem';
+import { ITaxonomyNavigationService } from './ITaxonomyNavigationService';
+import * as uuid from 'uuid';
+
+export default class MockTaxonomyNavigationService implements ITaxonomyNavigationService {
+    public getMenuItems(): Promise<IMenuItem[]> {
+        return new Promise<IMenuItem[]>((resolve) => {
+            resolve([
+                {
+                    id: uuid.v4(),
+                    label: 'Menu Item 1',
+                    url: 'https://www.bing.com',
+                    hoverText: 'Hover me!',
+                    pathDepth: 1,
+                    hasChildren: () => true,
+                    items: [
+                        {
+                            id: uuid.v4(),
+                            label: 'Submenu Item 1',
+                            hoverText: 'Huch!',
+                            url: 'https://www.bing.com',
+                            pathDepth: 2,
+                            hasChildren: () => false
+                        },
+                        {
+                            id: uuid.v4(),
+                            label: 'Submenu Item 2',
+                            hoverText: 'Huch!',
+                            url: 'https://www.bing.com',
+                            pathDepth: 2,
+                            hasChildren: () => false
+                        }
+                    ]
+                },
+                {
+                    id: uuid.v4(),
+                    label: 'Menu Item 2',
+                    hoverText: 'Huch!',
+                    url: 'https://www.bing.com',
+                    pathDepth: 1,
+                    hasChildren: () => false
+                },
+                {
+                    id: uuid.v4(),
+                    label: 'Menu Item 3',
+                    hoverText: 'Huch!',
+                    url: 'https://www.bing.com',
+                    pathDepth: 1,
+                    hasChildren: () => true,
+                    items: [
+                        {
+                            id: uuid.v4(),
+                            label: 'Submenu Item 1',
+                            hoverText: 'Huch!',
+                            url: 'https://www.bing.com',
+                            pathDepth: 2,
+                            hasChildren: () => false
+                        },
+                        {
+                            id: uuid.v4(),
+                            label: 'Submenu Item 2',
+                            hoverText: 'Huch!',
+                            url: 'https://www.bing.com',
+                            pathDepth: 2,
+                            hasChildren: () => true,
+                            items: [
+                                {
+                                    id: uuid.v4(),
+                                    label: 'Submenu Item 1',
+                                    hoverText: 'Huch!',
+                                    url: 'https://www.bing.com',
+                                    pathDepth: 3,
+                                    hasChildren: () => false
+                                },
+                                {
+                                    id: uuid.v4(),
+                                    label: 'Submenu Item 2',
+                                    hoverText: 'Huch!',
+                                    url: 'https://www.bing.com',
+                                    pathDepth: 3,
+                                    hasChildren: () => false
+                                }
+                            ]
+                        },
+                        {
+                            id: uuid.v4(),
+                            label: 'Submenu Item 3',
+                            hoverText: 'Huch!',
+                            url: 'https://www.bing.com',
+                            pathDepth: 2,
+                            hasChildren: () => false
+                        },
+                        {
+                            id: uuid.v4(),
+                            label: 'Submenu Item 4',
+                            hoverText: 'Huch!',
+                            url: 'https://www.bing.com',
+                            pathDepth: 2,
+                            hasChildren: () => false
+                        }
+                    ]
+                }
+            ]);
+        });
+    }
+}
--- a/src/services/SPTermStorePickerService.ts
+++ b/src/services/SPTermStorePickerService.ts
@@ -0,0 +1,532 @@
+/* tslint:disable:no-null-keyword max-line-length typedef no-any no-string-literal variable-name */
+/**
+ * This code is a copy from the library @pnp/sp-dev-fx-controls-react
+ */
+
+import { SPHttpClient, SPHttpClientResponse, ISPHttpClientOptions } from '@microsoft/sp-http';
+import { ITermStore, ITerms, ITerm, IGroup, ITermSet, ISuggestTerm } from './ISPTermStorePickerService';
+import { findIndex } from '@microsoft/sp-lodash-subset';
+import { ISPTermStorePickerServiceProps } from './ISPTermStorePickerServiceProps';
+import { IPickerTerm } from './IPickerTerm';
+import { ApplicationCustomizerContext } from '@microsoft/sp-application-base';
+import { debugError } from './MegaMenuDebug';
+
+const EmptyGuid: string = '00000000-0000-0000-0000-000000000000';
+
+/**
+ * Service implementation to manage term stores in SharePoint
+ */
+export default class SPTermStorePickerService {
+    private clientServiceUrl: string;
+    private suggestionServiceUrl: string;
+
+    /**
+     * Service constructor
+     */
+    constructor(private props: ISPTermStorePickerServiceProps, private context: ApplicationCustomizerContext, private debug: boolean = false) {
+        this.clientServiceUrl = this.context.pageContext.web.absoluteUrl + '/_vti_bin/client.svc/ProcessQuery';
+        this.suggestionServiceUrl = this.context.pageContext.web.absoluteUrl + '/_vti_bin/TaxonomyInternalService.json/GetSuggestions';
+    }
+
+    public async getTermLabels(termId: string): Promise<string[]> {
+        let result: string[] = null;
+        try {
+            const data = `<Request AddExpandoFieldTypeSuffix="true" SchemaVersion="15.0.0.0" LibraryVersion="16.0.0.0" ApplicationName=".NET Library" xmlns="http://schemas.microsoft.com/sharepoint/clientquery/2009"><Actions><ObjectPath Id="8" ObjectPathId="7" /><ObjectIdentityQuery Id="9" ObjectPathId="7" /><ObjectPath Id="11" ObjectPathId="10" /><ObjectIdentityQuery Id="12" ObjectPathId="10" /><ObjectPath Id="14" ObjectPathId="13" /><ObjectIdentityQuery Id="15" ObjectPathId="13" /><Query Id="16" ObjectPathId="13"><Query SelectAllProperties="false"><Properties><Property Name="Labels" SelectAll="true"><Query SelectAllProperties="false"><Properties /></Query></Property></Properties></Query></Query></Actions><ObjectPaths><StaticMethod Id="7" Name="GetTaxonomySession" TypeId="{981cbc68-9edc-4f8d-872f-71146fcbb84f}" /><Method Id="10" ParentId="7" Name="GetDefaultKeywordsTermStore" /><Method Id="13" ParentId="10" Name="GetTerm"><Parameters><Parameter Type="Guid">${termId}</Parameter></Parameters></Method></ObjectPaths></Request>`;
+
+            const reqHeaders = new Headers();
+            reqHeaders.append('accept', 'application/json');
+            reqHeaders.append('content-type', 'application/xml');
+
+            const httpPostOptions: ISPHttpClientOptions = {
+                headers: reqHeaders,
+                body: data
+            };
+
+            const callResult = await this.context.spHttpClient.post(this.clientServiceUrl, SPHttpClient.configurations.v1, httpPostOptions);
+            const jsonResult = await callResult.json();
+
+            const node = jsonResult.find(x => x._ObjectType_ === 'SP.Taxonomy.Term');
+            if (node && node.Labels && node.Labels._Child_Items_) {
+                result = node.Labels._Child_Items_.map(termLabel => termLabel.Value);
+            }
+        } catch (error) {
+            result = null;
+            debugError(this.debug, 'SPTermStorePickerService', 'Error reading term labels.', error);
+        }
+        return result;
+    }
+
+    /**
+     * Gets the collection of term stores in the current SharePoint env
+     */
+    public getTermStores(): Promise<ITermStore[]> {
+        // Retrieve the term store name, groups, and term sets
+        const data = '<Request AddExpandoFieldTypeSuffix="true" SchemaVersion="15.0.0.0" LibraryVersion="16.0.0.0" ApplicationName=".NET Library" xmlns="http://schemas.microsoft.com/sharepoint/clientquery/2009"><Actions><ObjectPath Id="2" ObjectPathId="1" /><ObjectIdentityQuery Id="3" ObjectPathId="1" /><ObjectPath Id="5" ObjectPathId="4" /><ObjectIdentityQuery Id="6" ObjectPathId="4" /><Query Id="7" ObjectPathId="4"><Query SelectAllProperties="false"><Properties><Property Name="Id" ScalarProperty="true" /><Property Name="Name" ScalarProperty="true" /><Property Name="Groups"><Query SelectAllProperties="false"><Properties /></Query><ChildItemQuery SelectAllProperties="false"><Properties><Property Name="Name" ScalarProperty="true" /><Property Name="Id" ScalarProperty="true" /><Property Name="IsSystemGroup" ScalarProperty="true" /><Property Name="TermSets"><Query SelectAllProperties="false"><Properties /></Query><ChildItemQuery SelectAllProperties="false"><Properties><Property Name="Name" ScalarProperty="true" /><Property Name="Id" ScalarProperty="true" /><Property Name="Description" ScalarProperty="true" /><Property Name="Names" ScalarProperty="true" /></Properties></ChildItemQuery></Property></Properties></ChildItemQuery></Property></Properties></Query></Query></Actions><ObjectPaths><StaticMethod Id="1" Name="GetTaxonomySession" TypeId="{981cbc68-9edc-4f8d-872f-71146fcbb84f}" /><Method Id="4" ParentId="1" Name="GetDefaultSiteCollectionTermStore" /></ObjectPaths></Request>';
+
+        const reqHeaders = new Headers();
+        reqHeaders.append('accept', 'application/json');
+        reqHeaders.append('content-type', 'application/xml');
+
+        const httpPostOptions: ISPHttpClientOptions = {
+            headers: reqHeaders,
+            body: data
+        };
+
+        return this.context.spHttpClient.post(this.clientServiceUrl, SPHttpClient.configurations.v1, httpPostOptions).then((serviceResponse: SPHttpClientResponse) => {
+            return serviceResponse.json().then((serviceJSONResponse: any) => {
+                // Construct results
+                const termStoreResult: ITermStore[] = serviceJSONResponse.filter((r: { [x: string]: string; }) => r['_ObjectType_'] === 'SP.Taxonomy.TermStore');
+                // Check if term store was retrieved
+                if (termStoreResult.length > 0) {
+                    // Check if the termstore needs to be filtered or limited
+                    if (this.props.termsetNameOrID) {
+                        return termStoreResult.map(termstore => {
+                            let termGroups = termstore.Groups._Child_Items_;
+
+                            // Check if the groups have to be limited to a specific term set
+                            if (this.props.termsetNameOrID) {
+                                const termsetNameOrId = this.props.termsetNameOrID;
+                                termGroups = termGroups.map((group: IGroup) => {
+                                    group.TermSets._Child_Items_ = group.TermSets._Child_Items_.filter((termSet: ITermSet) => termSet.Name === termsetNameOrId || this.cleanGuid(termSet.Id).toLowerCase() === this.cleanGuid(termsetNameOrId).toLowerCase());
+                                    return group;
+                                });
+                            }
+
+                            // Filter out all systen groups
+                            termGroups = termGroups.filter(group => !group.IsSystemGroup);
+
+                            // Filter out empty groups
+                            termGroups = termGroups.filter((group: IGroup) => group.TermSets._Child_Items_.length > 0);
+
+                            // Map the new groups
+                            termstore.Groups._Child_Items_ = termGroups;
+                            return termstore;
+                        });
+                    }
+
+                    // Return the term store results
+                    return termStoreResult;
+                }
+                return [];
+            });
+        });
+    }
+
+    /**
+     * Gets the current term set
+     */
+    public async getTermSet(): Promise<ITermSet> {
+        const termStore = await this.getTermStores();
+        return this.getTermSetId(termStore, this.props.termsetNameOrID);
+    }
+
+    /**
+     * Retrieve all terms for the given term set
+     * @param termset
+     */
+    public async getAllTerms(termset: string, hideDeprecatedTags?: boolean, hideTagsNotAvailableForTagging?: boolean, useSessionStorage: boolean = true): Promise<ITermSet> {
+        let termsetId: string = termset;
+        // Check if the provided term set property is a GUID or string
+        if (!this.isGuid(termset)) {
+            // Fetch the term store information
+            const termStore = await this.getTermStores();
+            // Get the ID of the provided term set name
+            const crntTermSet = this.getTermSetId(termStore, termset);
+            if (crntTermSet) {
+                termsetId = this.cleanGuid(crntTermSet.Id);
+            } else {
+                return null;
+            }
+        }
+
+        const childTerms = this.getTermsById(termsetId, useSessionStorage);
+
+        if (childTerms) {
+            return childTerms;
+        }
+
+        // Request body to retrieve all terms for the given term set
+        const data = `<Request xmlns="http://schemas.microsoft.com/sharepoint/clientquery/2009" SchemaVersion="15.0.0.0" LibraryVersion="16.0.0.0" ApplicationName="Javascript Library"><Actions><ObjectPath Id="1" ObjectPathId="0" /><ObjectIdentityQuery Id="2" ObjectPathId="0" /><ObjectPath Id="4" ObjectPathId="3" /><ObjectIdentityQuery Id="5" ObjectPathId="3" /><ObjectPath Id="7" ObjectPathId="6" /><ObjectIdentityQuery Id="8" ObjectPathId="6" /><ObjectPath Id="10" ObjectPathId="9" /><Query Id="11" ObjectPathId="6"><Query SelectAllProperties="true"><Properties /></Query></Query><Query Id="12" ObjectPathId="9"><Query SelectAllProperties="false"><Properties /></Query><ChildItemQuery SelectAllProperties="false"><Properties><Property Name="IsRoot" SelectAll="true" /><Property Name="Labels" SelectAll="true" /><Property Name="TermsCount" SelectAll="true" /><Property Name="CustomSortOrder" SelectAll="true" /><Property Name="Id" SelectAll="true" /><Property Name="Name" SelectAll="true" /><Property Name="PathOfTerm" SelectAll="true" /><Property Name="Parent" SelectAll="true" /><Property Name="LocalCustomProperties" SelectAll="true" /><Property Name="IsDeprecated" ScalarProperty="true" /><Property Name="IsAvailableForTagging" ScalarProperty="true" /></Properties></ChildItemQuery></Query></Actions><ObjectPaths><StaticMethod Id="0" Name="GetTaxonomySession" TypeId="{981cbc68-9edc-4f8d-872f-71146fcbb84f}" /><Method Id="3" ParentId="0" Name="GetDefaultKeywordsTermStore" /><Method Id="6" ParentId="3" Name="GetTermSet"><Parameters><Parameter Type="Guid">${termsetId}</Parameter></Parameters></Method><Method Id="9" ParentId="6" Name="GetAllTerms" /></ObjectPaths></Request>`;
+
+        const reqHeaders = new Headers();
+        reqHeaders.append('accept', 'application/json');
+        reqHeaders.append('content-type', 'application/xml');
+
+        const httpPostOptions: ISPHttpClientOptions = {
+            headers: reqHeaders,
+            body: data
+        };
+
+        return this.context.spHttpClient.post(this.clientServiceUrl, SPHttpClient.configurations.v1, httpPostOptions).then((serviceResponse: SPHttpClientResponse) => {
+            return serviceResponse.json().then((serviceJSONResponse: any) => {
+                const termStoreResultTermSets: ITermSet[] = serviceJSONResponse.filter((r: { [x: string]: string; }) => r['_ObjectType_'] === 'SP.Taxonomy.TermSet');
+
+                if (termStoreResultTermSets.length > 0) {
+                    const termStoreResultTermSet = termStoreResultTermSets[0];
+                    termStoreResultTermSet.Terms = [];
+                    // Retrieve the term collection results
+                    const termStoreResultTerms: ITerms[] = serviceJSONResponse.filter((r: { [x: string]: string; }) => r['_ObjectType_'] === 'SP.Taxonomy.TermCollection');
+                    if (termStoreResultTerms.length > 0) {
+                        // Retrieve all terms
+                        let terms = termStoreResultTerms[0]._Child_Items_;
+
+                        if (hideDeprecatedTags === true) {
+                            terms = terms.filter(d => d.IsDeprecated === false);
+                        }
+
+                        if (hideTagsNotAvailableForTagging === true) {
+                            terms = terms.filter(d => d.IsAvailableForTagging === true);
+                        }
+
+                        // Clean the term ID and specify the path depth
+                        terms = terms.map(term => {
+                            if (term.IsRoot) {
+                                term.CustomSortOrderIndex = (termStoreResultTermSet.CustomSortOrder) ? termStoreResultTermSet.CustomSortOrder.split(':').indexOf(this.cleanGuid(term.Id)) : -1;
+                            } else {
+                                term.CustomSortOrderIndex = (term['Parent'].CustomSortOrder) ? term['Parent'].CustomSortOrder.split(':').indexOf(this.cleanGuid(term.Id)) : -1;
+                            }
+                            term.Id = this.cleanGuid(term.Id);
+                            term['PathDepth'] = term.PathOfTerm.split(';').length;
+                            term.TermSet = { Id: this.cleanGuid(termStoreResultTermSet.Id), Name: termStoreResultTermSet.Name };
+                            if (term['Parent']) {
+                                term.ParentId = this.cleanGuid(term['Parent'].Id);
+                            }
+                            return term;
+                        });
+                        // Check if the term set was not empty
+                        if (terms.length > 0) {
+                            // Sort the terms by PathOfTerm and their depth
+                            terms = this.sortTerms(terms);
+                            termStoreResultTermSet.Terms = terms;
+                        }
+                    }
+
+                    try {
+                        if (useSessionStorage && window.sessionStorage) {
+                            window.sessionStorage.setItem(termsetId, JSON.stringify(termStoreResultTermSet));
+                        }
+                    } catch (error) {
+                        // Do nothing, sometimes "storage quota exceeded" error if too many items
+                    }
+                    return termStoreResultTermSet;
+                }
+                return null;
+            });
+        });
+    }
+
+    /**
+     * Retrieve all terms that starts with the searchText
+     * @param searchText
+     */
+    public searchTermsByName(searchText: string): Promise<IPickerTerm[]> {
+        return this.searchTermsByTermSet(searchText);
+    }
+
+    public async searchTermsByTermId(searchText: string, termId: string): Promise<IPickerTerm[]> {
+        const { useSessionStorage } = this.props;
+        const childTerms = this.getTermsById(termId, useSessionStorage);
+        if (childTerms) {
+            return this.searchTermsBySearchText(childTerms, searchText);
+        } else {
+            const {
+                termsetNameOrID,
+                hideDeprecatedTags,
+                hideTagsNotAvailableForTagging
+            } = this.props;
+
+            const terms = await this.getAllTermsByAnchorId(
+                termsetNameOrID,
+                termId,
+                hideDeprecatedTags,
+                hideTagsNotAvailableForTagging,
+                useSessionStorage);
+
+            if (terms) {
+                return this.searchTermsBySearchText(terms, searchText);
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * Retrieve all terms for the given term set and anchorId
+     */
+    public async getAllTermsByAnchorId(termsetNameOrID: string, anchorId: string, hideDeprecatedTags?: boolean, hideTagsNotAvailableForTagging?: boolean, useSessionStorage: boolean = true): Promise<IPickerTerm[]> {
+
+        const returnTerms: IPickerTerm[] = [];
+
+        const childTerms = this.getTermsById(anchorId, useSessionStorage);
+        if (childTerms) {
+            return childTerms;
+        }
+
+        const termSet = await this.getAllTerms(termsetNameOrID, hideDeprecatedTags, hideTagsNotAvailableForTagging);
+        const terms = termSet.Terms;
+        if (anchorId) {
+            const anchorTerm = terms.filter(t => t.Id.toLowerCase() === anchorId.toLowerCase()).shift();
+            if (anchorTerm) {
+                // Append ';' separator, as a suffix to anchor term path.
+                const anchorTermPath = `${anchorTerm.PathOfTerm};`;
+                const anchorTerms: ITerm[] = terms.filter(t => t.PathOfTerm.substring(0, anchorTermPath.length) === anchorTermPath && t.Id !== anchorTerm.Id);
+
+                anchorTerms.forEach(term => {
+                    returnTerms.push(this.convertTermToPickerTerm(term));
+                });
+
+                try {
+                    if (useSessionStorage && window.sessionStorage) {
+                        window.sessionStorage.setItem(anchorId, JSON.stringify(returnTerms));
+                    }
+                } catch (error) {
+                    // Do nothing
+                }
+            }
+        } else {
+            terms.forEach(term => {
+                returnTerms.push(this.convertTermToPickerTerm(term));
+            });
+        }
+
+        return returnTerms;
+    }
+
+    /**
+     * Clean the Guid from the Web Service response
+     * @param guid
+     */
+    public cleanGuid(guid: string): string {
+        if (guid !== undefined) {
+            return guid.replace('/Guid(', '').replace('/', '').replace(')', '');
+        } else {
+            return '';
+        }
+    }
+
+    /**
+      * Get the term set ID by its name
+      * @param termstore
+      * @param termset
+      */
+    private getTermSetId(termstore: ITermStore[], termsetName: string): ITermSet {
+        if (termstore && termstore.length > 0 && termsetName) {
+            // Get the first term store
+            const ts = termstore[0];
+            // Check if the term store contains groups
+            if (ts.Groups && ts.Groups._Child_Items_) {
+                for (const group of ts.Groups._Child_Items_) {
+                    // Check if the group contains term sets
+                    if (group.TermSets && group.TermSets._Child_Items_) {
+                        for (const termSet of group.TermSets._Child_Items_) {
+                            // Check if the term set is found
+                            if (termSet.Name === termsetName) {
+                                return termSet;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        return null;
+    }
+
+    private getTermsById(termId, useSessionStorage: boolean = true) {
+        try {
+            if (useSessionStorage && window.sessionStorage) {
+                const terms = window.sessionStorage.getItem(termId);
+                if (terms) {
+                    return JSON.parse(terms);
+                } else {
+                    return null;
+                }
+            } else {
+                return null;
+            }
+        } catch (error) {
+            return null;
+        }
+    }
+
+    private searchTermsBySearchText(terms, searchText) {
+        if (terms) {
+            return terms.filter((t) => { return t.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1; });
+        } else {
+            return [];
+        }
+    }
+
+    /**
+       * Searches terms for the given term set
+       * @param searchText
+       * @param termsetId
+       */
+    private searchTermsByTermSet(searchText: string): Promise<IPickerTerm[]> {
+        return new Promise<IPickerTerm[]>(resolve => {
+            this.getTermStores().then(termStore => {
+                let termSetId = this.props.termsetNameOrID;
+                if (!this.isGuid(termSetId)) {
+                    // Get the ID of the provided term set name
+                    const crntTermSet = this.getTermSetId(termStore, termSetId);
+                    if (crntTermSet) {
+                        termSetId = this.cleanGuid(crntTermSet.Id);
+                    } else {
+                        resolve(null);
+                        return;
+                    }
+                }
+                if (termStore === undefined || termStore.length === 0) {
+                    resolve(null);
+                    return;
+                }
+                const loc: number = this.context.pageContext.cultureInfo.currentUICultureName === 'de-de' ? 1031 : 1033;
+                const data: any = {
+                    start: searchText,
+                    lcid: loc !== 0 ? loc : this.context.pageContext.web.language,
+                    sspList: this.cleanGuid(termStore[0].Id),
+                    termSetList: termSetId,
+                    anchorId: this.props.anchorId ? this.props.anchorId : EmptyGuid,
+                    isSpanTermStores: false,
+                    isSpanTermSets: false,
+                    isIncludeUnavailable: this.props.hideTagsNotAvailableForTagging === true,
+                    isIncludeDeprecated: this.props.hideDeprecatedTags === true,
+                    isAddTerms: false,
+                    isIncludePathData: false,
+                    excludeKeyword: false,
+                    excludedTermset: EmptyGuid
+                };
+
+                const reqHeaders: Headers = new Headers();
+                reqHeaders.append('accept', 'application/json');
+                reqHeaders.append('content-type', 'application/json');
+
+                const httpPostOptions: ISPHttpClientOptions = {
+                    headers: reqHeaders,
+                    body: JSON.stringify(data)
+                };
+
+                return this.context.spHttpClient.post(this.suggestionServiceUrl, SPHttpClient.configurations.v1, httpPostOptions).then((serviceResponse: SPHttpClientResponse) => {
+                    return serviceResponse.json().then((serviceJSONResponse: any) => {
+                        const groups = serviceJSONResponse.d.Groups;
+                        if (groups && groups.length > 0) {
+                            // Retrieve the term collection results
+                            const terms: ISuggestTerm[] = groups[0].Suggestions;
+                            if (terms.length > 0) {
+                                // Retrieve all terms
+
+                                const returnTerms: IPickerTerm[] = terms.map((term: ISuggestTerm) => this.convertSuggestTermToPickerTerm(term));
+                                resolve(returnTerms);
+                                return;
+                            }
+
+                        }
+
+                        resolve([]);
+                    });
+                });
+            });
+        });
+    }
+
+    private isGuid(strGuid: string): boolean {
+        return /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/.test(strGuid);
+    }
+
+    /**
+     * Sorting terms based on their path and depth
+     *
+     * @param terms
+     */
+    private sortTerms(terms: ITerm[]) {
+        // Start sorting by depth
+        let newTermsOrder: ITerm[] = [];
+        let itemsToSort: boolean = true;
+        let pathLevel: number = 1;
+        while (itemsToSort) {
+            // Get terms for the current level
+            let crntTerms = terms.filter(term => term.PathDepth === pathLevel);
+            if (crntTerms && crntTerms.length > 0) {
+                crntTerms = crntTerms.sort(this.sortTermByPath);
+
+                if (pathLevel !== 1) {
+                    crntTerms = crntTerms.reverse();
+                    for (const crntTerm of crntTerms) {
+                        const pathElms: string[] = crntTerm.PathOfTerm.split(';');
+                        // Last item is not needed for parent path
+                        pathElms.pop();
+                        // Find the parent item and add the new item
+                        const idx: number = findIndex(newTermsOrder, term => term.PathOfTerm === pathElms.join(';'));
+                        if (idx !== -1) {
+                            newTermsOrder.splice(idx + 1, 0, crntTerm);
+                        } else {
+                            // Push the item at the end if the parent couldn't be found
+                            newTermsOrder.push(crntTerm);
+                        }
+                    }
+                } else {
+                    newTermsOrder = crntTerms;
+                }
+
+                ++pathLevel;
+            } else {
+                itemsToSort = false;
+            }
+        }
+        return newTermsOrder;
+    }
+
+    /**
+     * Sort the terms by their path
+     *
+     * @param a term 2
+     * @param b term 2
+     */
+    private sortTermByPath(a: ITerm, b: ITerm) {
+        if (a.CustomSortOrderIndex === -1) {
+            if (a.PathOfTerm.toLowerCase() < b.PathOfTerm.toLowerCase()) {
+                return -1;
+            }
+            if (a.PathOfTerm.toLowerCase() > b.PathOfTerm.toLowerCase()) {
+                return 1;
+            }
+            return 0;
+        } else {
+            if (a.CustomSortOrderIndex < b.CustomSortOrderIndex) {
+                return -1;
+            }
+            if (a.CustomSortOrderIndex > b.CustomSortOrderIndex) {
+                return 1;
+            }
+            return 0;
+        }
+    }
+
+    private convertTermToPickerTerm(term: ITerm): IPickerTerm {
+        return {
+            key: this.cleanGuid(term.Id),
+            name: term.Name,
+            path: term.PathOfTerm,
+            termSet: this.cleanGuid(term.TermSet.Id),
+            termSetName: term.TermSet.Name
+        };
+    }
+
+    private convertSuggestTermToPickerTerm(term: ISuggestTerm): IPickerTerm {
+        let path: string = '';
+        let termSetName: string = '';
+        if (term.Paths && term.Paths.length > 0) {
+            const fullPath: string = term.Paths[0].replace(/^\[/, '').replace(/\]$/, '');
+            const fullPathParts: string[] = fullPath.split(':');
+            path = fullPathParts.join(';') + ';' + term.DefaultLabel;
+            termSetName = fullPathParts[0];
+        }
+        return {
+            key: this.cleanGuid(term.Id),
+            name: term.DefaultLabel,
+            path: path,
+            termSet: EmptyGuid, // TermSet Guid is not given with suggestion
+            termSetName: termSetName
+        };
+    }
+}
--- a/src/services/TaxonomyNavigationService.ts
+++ b/src/services/TaxonomyNavigationService.ts
@@ -0,0 +1,83 @@
+import { ITaxonomyNavigationService } from './ITaxonomyNavigationService';
+import { IMenuItem } from './IMenuItem';
+import { sp } from '@pnp/sp';
+import { MenuItem } from './MenuItem';
+import { ApplicationCustomizerContext } from '@microsoft/sp-application-base';
+import SPTermStorePickerService from './SPTermStorePickerService';
+import { ITerm, ITermSet } from './ISPTermStorePickerService';
+import { ItemDictionary } from './ItemDictionary';
+import { debugWarn } from './MegaMenuDebug';
+
+const LOG_SOURCE: string = 'TaxonomyNavigationService';
+
+export class TaxonomyNavigationService implements ITaxonomyNavigationService {
+    private _taxonomyPickerService: SPTermStorePickerService;
+    private _noTerm: ITerm = {
+        _ObjectType_: '',
+        _ObjectIdentity_: '',
+        CustomSortOrderIndex: 0,
+        Description: '',
+        Id: '',
+        IsAvailableForTagging: false,
+        IsDeprecated: false,
+        IsRoot: true,
+        LocalCustomProperties: {
+            _Sys_Nav_HoverText: 'Es wurden keine Terms gefunden. Bitte ueberpruefen Sie Ihre Einstellungen.',
+            _Sys_Nav_ExcludedProviders: undefined,
+            _Sys_Nav_SimpleLinkUrl: undefined
+        },
+        Name: 'Es wurden keine Terms gefunden. Bitte ueberpruefen Sie Ihre Einstellungen.',
+        PathOfTerm: '',
+        TermSet: undefined
+    };
+
+    constructor(
+        private context: ApplicationCustomizerContext,
+        private termSetName: string,
+        private debug: boolean = false
+    ) {
+        sp.setup({
+            spfxContext: context
+        });
+        this._taxonomyPickerService = new SPTermStorePickerService(
+            {
+                anchorId: '',
+                termsetNameOrID: termSetName,
+                useSessionStorage: true,
+                hideDeprecatedTags: true,
+                hideTagsNotAvailableForTagging: false
+            },
+            this.context,
+            this.debug
+        );
+    }
+
+    public async getMenuItems(): Promise<IMenuItem[]> {
+        const siteCollectionUrl: string = this.context.pageContext.site.absoluteUrl;
+        const termset: ITermSet = await this._taxonomyPickerService.getAllTerms(this.termSetName);
+        const itemsDict: ItemDictionary<IMenuItem> = new ItemDictionary<IMenuItem>();
+        const menuItems: IMenuItem[] = [];
+
+        if (!termset || !termset.Terms) {
+            debugWarn(this.debug, LOG_SOURCE, 'No terms found in the term set.');
+            return [new MenuItem(this._noTerm, 0, siteCollectionUrl)];
+        }
+
+        termset.Terms.forEach((term: ITerm) => {
+            const menuItem: IMenuItem = new MenuItem(term, 0, siteCollectionUrl);
+            itemsDict.Add(term.Id, menuItem);
+            if (menuItem.pathDepth === 1) {
+                menuItems.push(menuItem);
+            } else {
+                const parentItem: IMenuItem = itemsDict.Get(term.ParentId);
+                if (parentItem) {
+                    parentItem.items.push(menuItem);
+                } else {
+                    debugWarn(this.debug, LOG_SOURCE, 'Item without parent:', term.PathOfTerm);
+                }
+            }
+        });
+
+        return menuItems;
+    }
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["extensions/megaMenu/MegaMenu.module.scss.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,CAAC,uBAAuB,CAAC,CAAC;AACjC,IAAM,MAAM,GAAG;IACb,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE,mBAAmB;CAC9B,CAAC;AAEF,eAAe,MAAM,CAAC;AACtB,mBAAmB","file":"extensions/megaMenu/MegaMenu.module.scss.js","sourcesContent":["/* tslint:disable /\r\nrequire('./MegaMenu.module.css');\r\nconst styles = {\r\n mmSlideIn: 'mmSlideIn_09a8e1a7',\r\n mmFadeIn: 'mmFadeIn_09a8e1a7',\r\n};\r\n\r\nexport default styles;\r\n/ tslint:enable */"],"sourceRoot":"..\\..\\..\\src"}
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,wCAAwC;AACxC,wFAAwF;AAExF,+CAA+C;AAC/C,OAAO,EAAE,yBAAyB,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,4DAA4D,CAAC;AACrG,OAAO,EAAE,qBAAqB,EAAE,MAAM,0DAA0D,CAAC;AAKjG,EAAE,CAAC,CAAC,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC;IAChC,MAAM,CAAC,kBAAkB,GAAG;QACxB,yBAAyB,EAAE,OAAO,CAAC,sCAAsC,CAAC,CAAC,yBAAyB;QACpG,gBAAgB,EAAE,OAAO,CAAC,wCAAwC,CAAC,CAAC,gBAAgB;QACpF,uBAAuB,EAAE,OAAO,CAAC,4DAA4D,CAAC,CAAC,uBAAuB;QACtH,qBAAqB,EAAE,OAAO,CAAC,0DAA0D,CAAC,CAAC,qBAAqB;KACnH,CAAC;AACN,CAAC","file":"index.js","sourcesContent":["// tslint:disable:max-line-length no-any\r\n// A file is required to be in the root of the /src directory by the TypeScript compiler\r\n\r\n// Export services for classic SharePoint usage\r\nexport { TaxonomyNavigationService } from './services/TaxonomyNavigationService';\r\nexport { MegaMenuRenderer } from './extensions/megaMenu/MegaMenuRenderer';\r\nexport { UserCustomActionService } from './services/UserCustomActionService/UserCustomActionService';\r\nexport { UserCustomActionScope } from './services/UserCustomActionService/UserCustomActionScope';\r\n\r\n// Expose services globally for classic JavaScript consumption\r\ndeclare var window: any;\r\n\r\nif (typeof window !== 'undefined') {\r\n window.__megaMenuServices = {\r\n TaxonomyNavigationService: require('./services/TaxonomyNavigationService').TaxonomyNavigationService,\r\n MegaMenuRenderer: require('./extensions/megaMenu/MegaMenuRenderer').MegaMenuRenderer,\r\n UserCustomActionService: require('./services/UserCustomActionService/UserCustomActionService').UserCustomActionService,\r\n UserCustomActionScope: require('./services/UserCustomActionService/UserCustomActionScope').UserCustomActionScope\r\n };\r\n}\r\n"],"sourceRoot":"..\\src"}
				`@@ -0,0 +1 @@`
				`{"version":3,"sources":[],"names":[],"mappings":"","file":"services/IMenuItem.js","sourcesContent":[],"sourceRoot":"..\\..\\src"}`
				`@@ -0,0 +1,3 @@`


				`//# sourceMappingURL=ISPTermStorePickerService.js.map`
				`@@ -0,0 +1,3 @@`


				`//# sourceMappingURL=ITaxonomyNavigationService.js.map`
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["services/ItemDictionary.ts"],"names":[],"mappings":"AAAA;IAAA;IAQA,CAAC;IAPU,4BAAG,GAAV,UAAW,GAAW;QAClB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrB,CAAC;IAEM,4BAAG,GAAV,UAAW,GAAW,EAAE,KAAQ;QAC5B,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;IACtB,CAAC;IACL,qBAAC;AAAD,CARA,AAQC,IAAA","file":"services/ItemDictionary.js","sourcesContent":["export class ItemDictionary<T> {\r\n public Get(key: string): T {\r\n return this[key];\r\n }\r\n\r\n public Add(key: string, value: T): void {\r\n this[key] = value;\r\n }\r\n}\r\n"],"sourceRoot":"..\\..\\src"}
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["services/MenuItem.ts"],"names":[],"mappings":"AAAA,0DAA0D;AAK1D;IAQI,kBAAY,IAAW,EAAS,KAAa,EAAE,iBAA0B;QAAzC,UAAK,GAAL,KAAK,CAAQ;QACzC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,qBAAqB,CAAC,oBAAoB,CAAC,CAAC;QAClE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QAChC,IAAM,MAAM,GAAW,IAAI,CAAC,qBAAqB,CAAC,wBAAwB,CAAC,IAAI,IAAI,CAAC,qBAAqB,CAAC,oBAAoB,CAAC,CAAC;QAChI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;YACT,IAAI,CAAC,GAAG,GAAG,iBAAiB,IAAI,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC;kBACjE,iBAAiB,GAAG,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,MAAM,CAAC;kBAC9D,MAAM,CAAC;QACjB,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IACpB,CAAC;IAEM,8BAAW,GAAlB;QACI,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/C,CAAC;IAEM,0BAAO,GAAd;QACI,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;YACV,MAAc,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;QAC7C,CAAC;IACL,CAAC;IACL,eAAC;AAAD,CA/BA,AA+BC,IAAA","file":"services/MenuItem.js","sourcesContent":["// tslint:disable:no-any no-string-literal max-line-length\r\n\r\nimport { IMenuItem } from './IMenuItem';\r\nimport { ITerm } from './ISPTermStorePickerService';\r\n\r\nexport class MenuItem implements IMenuItem {\r\n public id: string;\r\n public label: string;\r\n public hoverText: string;\r\n public pathDepth: number;\r\n public url?: string;\r\n public items?: IMenuItem[];\r\n\r\n constructor(term: ITerm, public level: number, siteCollectionUrl?: string) {\r\n this.id = term.Id;\r\n this.label = term.Name;\r\n this.hoverText = term.LocalCustomProperties['_Sys_Nav_HoverText'];\r\n this.pathDepth = term.PathDepth;\r\n const rawUrl: string = term.LocalCustomProperties['_Sys_Nav_SimpleLinkUrl'] \|\| term.LocalCustomProperties['_Sys_Nav_TargetUrl'];\r\n if (rawUrl) {\r\n this.url = siteCollectionUrl && rawUrl.indexOf('~sitecollection') === 0\r\n ? siteCollectionUrl + rawUrl.substring('~sitecollection'.length)\r\n : rawUrl;\r\n }\r\n this.items = [];\r\n }\r\n\r\n public hasChildren(): boolean {\r\n return this.items && this.items.length > 0;\r\n }\r\n\r\n public command(): void {\r\n if (this.url) {\r\n (window as any).location.href = this.url;\r\n }\r\n }\r\n}\r\n"],"sourceRoot":"..\\..\\src"}
				`@@ -0,0 +1,3 @@`


				`//# sourceMappingURL=IUserCustomActionProps.js.map`
				`@@ -0,0 +1,3 @@`


				`//# sourceMappingURL=IUserCustomActionService.js.map`
				`@@ -0,0 +1 @@`
				`{"version":3,"sources":["services/UserCustomActionService/UserCustomActionScope.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,qBAIX;AAJD,WAAY,qBAAqB;IAC7B,oCAAW,CAAA;IACX,sCAAa,CAAA;IACb,sCAAa,CAAA;AACjB,CAAC,EAJW,qBAAqB,GAArB,qBAAqB,KAArB,qBAAqB,QAIhC","file":"services/UserCustomActionService/UserCustomActionScope.js","sourcesContent":["export enum UserCustomActionScope {\r\n Web = 'web',\r\n Site = 'site',\r\n List = 'list'\r\n}\r\n"],"sourceRoot":"..\\..\\..\\src"}`