Menü-Registry, Dropdown-Navigation und Breadcrumbs

Die Navigation in Nibbly hat ein größeres Upgrade bekommen. Aus einem flachen, zweckgebundenen Nav-Array wurde ein flexibles, Registry-basiertes Menüsystem — inklusive Dropdowns und Breadcrumbs.

Menü-Registry

Eine neue Datei content/menus.json definiert alle verfügbaren Menüs mit mehrsprachigen Labels:

{
  "menus": {
    "header": { "label": { "en": "Header", "de": "Kopfzeile" }, "weight": 0 },
    "footer-pages": { "label": { "en": "Pages", "de": "Seiten" }, "weight": 10 },
    "footer-legal": { "label": { "en": "Info", "de": "Rechtliches" }, "weight": 20 }
  }
}

Footer-Spalten werden jetzt automatisch aus der Registry erzeugt. Du möchtest eine dritte Footer-Spalte? Lege einen Eintrag in menus.json an und ordne Seiten der neuen Menü-ID zu. Spaltenüberschriften, Sortierung und mehrsprachige Labels werden zentral verwaltet.

Das ersetzt das alte legalLinks-System in footer.json. Rechtliche Seiten sind jetzt normale Seiten im Menü footer-legal.

Navigationssteuerung pro Seite

Jede Seite hat jetzt ein "nav"-Feld im JSON, das festlegt, in welchen Menüs sie erscheint:

{ "nav": ["header", "footer-pages"] }
{ "nav": ["footer-legal"] }
{ "nav": [] }

Das Admin-Dashboard zeigt oben im Content Editor ein neues Page Settings-Panel mit Checkboxen für jedes registrierte Menü. Navigation muss damit nicht mehr von Hand im JSON gepflegt werden.

Dropdown-Menüs

Nav-Einträge in nav-config.php unterstützen jetzt einen children-Key für Dropdown-Gruppen:

['href' => 'docs', 'label' => 'Resources', 'page' => 'docs', 'children' => [
    ['href' => 'docs', 'label' => 'Documentation', 'page' => 'docs'],
    ['href' => 'showcase', 'label' => 'Showcase', 'page' => 'showcase'],
]]

Am Desktop erscheinen Unterpunkte als Hover- und Focus-Dropdown. Mobil werden sie eingerückt inline gerendert. Ist eine Unterseite aktiv, wird auch der Parent hervorgehoben.

Breadcrumbs

Seiten können jetzt eine Breadcrumb-Spur in ihrem JSON definieren:

"breadcrumb": [
  { "label": "Docs", "href": "docs" },
  { "label": "API Reference" }
]

Standardseiten rendern Breadcrumbs automatisch oberhalb des Inhalts. Individuelle Layouts können renderBreadcrumb() dort aufrufen, wo die Breadcrumbs gebraucht werden. Das Page-Settings-Panel enthält dafür einen Editor mit Hinzufügen- und Entfernen-Funktionen.

CLI-Unterstützung

Das Scaffolding-Tool unterstützt die neuen Funktionen ebenfalls:

php cli/make.php --slug=api --lang=en --nav=header,footer-pages
php cli/make.php --slug=terms --nav=footer-legal
php cli/make.php --slug=api --breadcrumb="Docs:docs,API Reference"