Navegación y menús

OmniBuy permite crear múltiples menús con nombres personalizados (handles) que puedes referenciar desde cualquier template de tu tema. Los menús se gestionan desde el admin y están disponibles en tiempo real en el storefront.

Gestionar menús en el admin

Ve a Admin → Plataforma → Navegación para crear, editar y organizar tus menús.

Crear un menú

Haz clic en Nuevo menú.
Escribe un nombre descriptivo (ej. Menú principal).
El handle se genera automáticamente normalizando el nombre: tildes se convierten en su equivalente sin acento y los espacios en guiones (ej. Menú principal → menu-principal). Puedes editarlo manualmente — solo letras minúsculas, números y guiones.
Haz clic en Crear menú.

precaución

El handle es el identificador permanente que usarás en los templates. No lo cambies una vez que tu tema lo esté usando, ya que rompería las referencias existentes.

Añadir items

Desde el editor del menú puedes:

Añadir items con URL manual o usando el selector de destinos predefinidos.
Añadir subitems (un nivel de profundidad) haciendo clic en el botón + que aparece al pasar el cursor sobre un item raíz.
Editar label, URL y comportamiento de apertura de pestaña.
Eliminar items — se pide confirmación en un modal; los subitems se eliminan en cascada.
Reordenar arrastrando el handle ≡ del lado izquierdo (drag & drop guarda el orden automáticamente).

info

Los menús soportan dos niveles de profundidad: items raíz y subitems directos.

Selector de destinos

Al añadir un item puedes elegir entre URL (escrita manualmente) o Seleccionar para escoger de una lista predefinida:

Tienda — destinos del storefront:

Label	URL
Inicio	`/`
Todas las colecciones	`/colecciones`
Búsqueda	`/buscar`
Carrito	`/carrito`
Mi cuenta	`/cuenta`
Mis pedidos	`/cuenta/pedidos`
Contacto	`/contacto`

Páginas del sitio — todas las páginas de contenido creadas en Admin → Blog y páginas.

Al seleccionar un destino, la etiqueta se auto-completa si el campo está vacío.

Usar menús en tu tema

En cualquier template usa la función menu para obtener los items de un menú por su handle:

{{- range menu $ "main-menu" -}}
  <a href="{{ .URL }}"
     {{ if .OpenNewTab }}target="_blank" rel="noopener"{{ end }}>
    {{ .Title }}
  </a>
  {{- if .Children -}}
    <ul>
      {{- range .Children -}}
        <li><a href="{{ .URL }}">{{ .Title }}</a></li>
      {{- end -}}
    </ul>
  {{- end -}}
{{- end -}}

Propiedades de NavItem

Propiedad	Tipo	Descripción
`Title`	`string`	Etiqueta visible del item
`URL`	`string`	URL de destino
`OpenNewTab`	`bool`	Si debe abrirse en nueva pestaña
`Children`	`[]NavItem`	Subitems (máximo un nivel)

Handles recomendados

Aunque puedes usar cualquier handle, estos son los convencionales:

Handle	Uso sugerido
`main-menu`	Navegación principal del header
`footer-menu`	Links del pie de página
`sidebar-menu`	Menú lateral o de categorías
`quick-links`	Links rápidos en header o banner

Ejemplos

Header simple

<nav>
  <ul>
    {{- range menu $ "main-menu" -}}
    <li>
      <a href="{{ .URL }}"{{ if .OpenNewTab }} target="_blank" rel="noopener"{{ end }}>
        {{ .Title }}
      </a>
    </li>
    {{- end -}}
  </ul>
</nav>

<nav>
  <ul class="nav-list">
    {{- range menu $ "main-menu" -}}
    <li class="nav-item{{ if .Children }} has-dropdown{{ end }}">
      <a href="{{ .URL }}"{{ if .OpenNewTab }} target="_blank" rel="noopener"{{ end }}>
        {{ .Title }}
      </a>
      {{- if .Children -}}
      <ul class="dropdown">
        {{- range .Children -}}
        <li>
          <a href="{{ .URL }}"{{ if .OpenNewTab }} target="_blank" rel="noopener"{{ end }}>
            {{ .Title }}
          </a>
        </li>
        {{- end -}}
      </ul>
      {{- end -}}
    </li>
    {{- end -}}
  </ul>
</nav>

<footer>
  <div class="footer-col">
    <h4>Tienda</h4>
    <ul>
      {{- range menu $ "footer-menu" -}}
      <li><a href="{{ .URL }}">{{ .Title }}</a></li>
      {{- end -}}
    </ul>
  </div>
  <div class="footer-col">
    <h4>Ayuda</h4>
    <ul>
      {{- range menu $ "footer-help" -}}
      <li><a href="{{ .URL }}">{{ .Title }}</a></li>
      {{- end -}}
    </ul>
  </div>
</footer>

Comportamiento en el storefront

Los menús se cargan desde la base de datos en cada request — los cambios en Admin → Navegación se reflejan inmediatamente sin republicar el tema.
Si el handle no existe, menu $ "handle" devuelve nil y el range no itera — no hay error.
Los menús se indexan por handle en StoreContext.Menus — accesible también como {{ index .Menus "main-menu" }} si prefieres no usar el helper.

API REST

Los menús están disponibles vía API para integraciones headless:

GET /api/v1/storefront/menus/{handle}
Authorization: Bearer {token}

Respuesta:

{
  "data": {
    "handle": "main-menu",
    "name": "Menú principal",
    "items": [
      {
        "title": "Inicio",
        "url": "/",
        "open_new_tab": false,
        "children": []
      },
      {
        "title": "Colecciones",
        "url": "/colecciones",
        "open_new_tab": false,
        "children": [
          { "title": "Ropa", "url": "/colecciones/ropa", "open_new_tab": false }
        ]
      }
    ]
  }
}

Gestionar menús en el admin​

Crear un menú​

Añadir items​

Selector de destinos​

Usar menús en tu tema​

Propiedades de NavItem​

Handles recomendados​

Ejemplos​

Header simple​

Header con dropdown de subitems​

Footer con múltiples menús​

Comportamiento en el storefront​

API REST​