← Volver a noticias
Registro de menús, navegación desplegable y breadcrumbs

Registro de menús, navegación desplegable y breadcrumbs

The Code Beaver

La navegación en Nibbly acaba de recibir una mejora importante. Lo que antes era un array plano para un único propósito ahora es un sistema de menús flexible basado en un registro, con soporte para desplegables y breadcrumbs.

Registro de menús

El nuevo archivo content/menus.json define todos los menús disponibles con etiquetas multilingües:

{
  "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 }
  }
}

Las columnas del footer se generan ahora automáticamente desde el registro. ¿Quieres una tercera columna? Añade una entrada a menus.json y marca tus páginas con el nuevo ID de menú. Los encabezados de columna, el orden y las etiquetas multilingües quedan centralizados.

Esto reemplaza el antiguo sistema legalLinks de footer.json. Las páginas legales son ahora páginas normales asignadas al menú footer-legal.

Control de navegación por página

Cada página tiene ahora un campo "nav" en su JSON que controla en qué menús aparece:

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

El dashboard incluye un nuevo panel Page Settings en la parte superior del editor de contenido, con casillas para cada menú registrado. Ya no hace falta editar JSON a mano para controlar la navegación.

Menús desplegables

Los elementos de navegación en nav-config.php ahora admiten la clave children para agrupar subelementos:

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

En escritorio, los hijos aparecen como desplegable al pasar el cursor o enfocar. En móvil se muestran en línea e indentados. Si una página hija está activa, el elemento padre también se resalta.

Breadcrumbs

Las páginas pueden definir una ruta de breadcrumbs en su JSON:

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

Las páginas estándar renderizan breadcrumbs automáticamente sobre el contenido. Los layouts personalizados pueden llamar a renderBreadcrumb() donde lo necesiten. El panel Page Settings incluye un editor de breadcrumbs con controles para añadir y eliminar.

Soporte CLI

La herramienta de scaffolding también soporta las nuevas funciones:

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"