Menu Registry, Dropdown Navigation, and Breadcrumbs

by The Code Beaver

Navigation in Nibbly just got a major upgrade. What used to be a flat, single-purpose nav array is now a flexible, registry-driven menu system — with dropdown support and breadcrumbs on top.

Menu Registry

A new content/menus.json file defines all available menus with multilingual 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 columns are now generated automatically from the registry. Want a third footer column? Add an entry to menus.json and tag your pages with the new menu ID. Column headings, sort order, and multilingual labels are all handled.

This replaces the old legalLinks system in footer.json — legal pages are now regular pages assigned to the footer-legal menu, just like any other page.

Page-Level Navigation Control

Every page now has a "nav" field in its JSON that controls which menus it appears in:

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

The admin dashboard has a new Page Settings panel at the top of the content editor with checkboxes for each registered menu — no more hand-editing JSON to control navigation.

Dropdown Menus

Nav items in nav-config.php now support a children key for dropdown grouping:

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

On desktop, children appear as a hover/focus dropdown. On mobile, they're rendered inline and indented. If any child page is active, the parent gets highlighted too.

Breadcrumbs

Pages can now define a breadcrumb trail in their JSON:

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

Standard pages render breadcrumbs automatically above the content. Custom layouts can call renderBreadcrumb() wherever they need it. The dashboard's Page Settings panel includes a breadcrumb editor with add/remove controls.

CLI Support

The scaffolding tool now supports the new features:

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"