Menús de Navegación

Los menús permiten a los editores gestionar enlaces ordenados sin cambiar una plantilla del sitio. Un menú tiene un nombre estable, como primary o footer, y un conjunto separado de elementos para cada menú traducido.

Crear un menú

Crea y organiza menús en Menus en el admin de EmDash.

Usa el mismo nombre de menú en cada idioma. En un sitio multilingüe, abre un menú y usa su panel Translations para crear y editar las versiones en otros idiomas. EmDash mantiene conectadas las traducciones del mismo contenido o término de taxonomía, por lo que getMenu() puede usar la etiqueta y el slug para el idioma solicitado.

Cómo se resuelven los enlaces del menú

Los elementos de menú de contenido y taxonomía almacenan una referencia en lugar de una URL terminada. Cuando una plantilla llama a getMenu(), EmDash resuelve esa referencia usando los datos actuales de la colección y el idioma.

Cada elemento devuelto también contiene su etiqueta, destino opcional, atributo de título, clases CSS y children anidados. El ejemplo de renderizado a continuación usa esos valores directamente.

Renderizar un menú

Llama a getMenu() en un componente Astro renderizado en el servidor. Devuelve null cuando el nombre no existe.

El siguiente layout renderiza un menú principal y un nivel de elementos anidados:

---
import { getMenu } from "emdash";
import { getRelativeLocaleUrl } from "astro:i18n";

const locale = Astro.currentLocale;
const menu = await getMenu("primary", { locale });

function menuHref(url: string) {
  return locale && url.startsWith("/")
    ? getRelativeLocaleUrl(locale, url)
    : url;
}
---

{menu && menu.items.length > 0 && (
  <nav aria-label="Navegación principal">
    <ul>
      {menu.items.map((item) => {
        const href = menuHref(item.url);

        return (
          <li class:list={item.cssClasses}>
            <a
              href={href}
              target={item.target}
              rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
              title={item.titleAttr}
              aria-current={Astro.url.pathname === href ? "page" : undefined}
            >
              {item.label}
            </a>

            {item.children.length > 0 && (
              <ul>
                {item.children.map((child) => {
                  const childHref = menuHref(child.url);

                  return (
                    <li class:list={child.cssClasses}>
                      <a
                        href={childHref}
                        target={child.target}
                        rel={child.target === "_blank" ? "noopener noreferrer" : undefined}
                        title={child.titleAttr}
                        aria-current={Astro.url.pathname === childHref ? "page" : undefined}
                      >
                        {child.label}
                      </a>
                    </li>
                  );
                })}
              </ul>
            )}
          </li>
        );
      })}
    </ul>
  </nav>
)}

getMenu() primero elige el locale explícito, luego el idioma de la solicitud actual y después el idioma predeterminado configurado. Si un menú o entrada referenciada no existe en ese idioma, la búsqueda sigue la cadena de respaldo configurada.

Las URLs de los elementos del menú contienen el patrón de URL de la colección o la ruta de taxonomía, pero no contienen el prefijo de idioma de Astro. El helper menuHref() agrega ese prefijo a los enlaces relativos a la raíz y deja los enlaces externos sin cambios.

El ejemplo renderiza un nivel hijo, lo que cubre un menú desplegable típico. Si los editores pueden crear navegación más profunda, mueve el marcado del elemento a un componente recursivo que renderice los children de cada elemento con las mismas reglas.

Usar menús en áreas de widgets

Un widget de menú coloca un menú existente dentro de un área de widgets. El widget lee el menú para el idioma de la solicitud actual. Usa el patrón de renderizado directo de arriba cuando el sitio necesite marcado anidado personalizado o manejo explícito de URLs por idioma.

Consultar datos del menú directamente

Usa getMenus() cuando una plantilla necesite las definiciones de menú disponibles en lugar de los elementos de un menú. La referencia de la API en tiempo de ejecución documenta las firmas de consulta y los valores de retorno.

Para cambios programáticos en los menús, autentícate con un token Bearer y agrega X-EmDash-Request: 1 a cada solicitud que cambie el estado. Consulta los endpoints de menú para cuerpos de solicitud y respuestas.

Consulta Internacionalización para la configuración de enrutamiento por idioma y respaldo.