MegaMenu

Uso

Cada elemento principal tiene kind: link, command o panel. Un enlace necesita routerLink o url; una acción necesita su callback; un panel contiene columnas, grupos y hojas de enlace/acción. Asigna claves estables a todos los niveles. orientation elige el diseño horizontal o vertical; breakpoint activa la navegación móvil y scrollHeight limita la altura del panel.

Ejemplos

Prueba la interacción y abre Código para ver la implementación completa.

Seleccionado: — · itemClick: 0 · Acciones: 0

mobileActiveChange: cerrado

Prueba y configura

Cambia las opciones, prueba el resultado y consulta el template actualizado. Abre Código para ver el modelo de datos y la implementación completa.

Seleccionado: — · itemClick: 0 · Acciones: 0

mobileActiveChange: cerrado

ariaLabel

breakpoint

scrollHeight

disabled

Iconos de la aplicación

Contadores de elementos

Desactivar última acción

Lista vacía

Opciones avanzadas · 3

Las opciones de Core actualizan este template. Los iconos, contadores y acciones desactivadas pertenecen al modelo de datos que se muestra en Código.

<neu-mega-menu
  [items]="items"
  ariaLabel="Navegación de ejemplo"
  orientation="horizontal"
  direction="ltr"
  breakpoint="960px"
  scrollHeight="min(28rem, 70vh)"
  [disabled]="false"
  (itemClick)="selectItem($event)"
  (mobileActiveChange)="mobile.set($event)"
  [menuButtonAriaLabel]="'Mostrar u ocultar navegación de ejemplo'"
/>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

export const items = [
  {
    "key": "home",
    "kind": "command",
    "label": "Espacio de trabajo",
    "icon": "home",
    "command": () => { /* Handler in the complete example. */ }
  },
  {
    "key": "products",
    "kind": "panel",
    "label": "Componentes",
    "icon": "folder",
    "badge": "UI",
    "panel": {
      "columns": [
        {
          "key": "forms",
          "groups": [
            {
              "key": "controls",
              "label": "Controles de formulario",
              "items": [
                {
                  "key": "button",
                  "kind": "link",
                  "label": "Button",
                  "routerLink": "/es/components/button"
                },
                {
                  "key": "date",
                  "kind": "link",
                  "label": "DateInput",
                  "routerLink": "/es/components/date-input"
                }
              ]
            }
          ]
        },
        {
          "key": "data",
          "groups": [
            {
              "key": "tables",
              "label": "Datos y acciones",
              "items": [
                {
                  "key": "table",
                  "kind": "link",
                  "label": "Table",
                  "routerLink": "/es/components/table"
                },
                {
                  "key": "report",
                  "kind": "command",
                  "label": "Preparar informe",
                  "command": () => { /* Handler in the complete example. */ }
                }
              ]
            }
          ]
        }
      ]
    }
  },
  {
    "key": "guide",
    "kind": "link",
    "label": "Documentación",
    "routerLink": "/es/getting-started/introduction"
  },
  {
    "key": "settings",
    "kind": "command",
    "label": "Ajustes",
    "disabled": true,
    "icon": "settings",
    "command": () => { /* Handler in the complete example. */ }
  }
];

Datos y contenido

itemClick emite los enlaces o acciones activados, no los paneles que solo se despliegan. mobileActiveChange comunica el estado del menú móvil. Core gestiona apertura y foco y respeta las entradas desactivadas; la aplicación aporta los destinos y las acciones. Start y End añaden contenido alrededor. Item recibe item, active, index y level (0 para principales, 3 para hojas), no un callback que debas ejecutar.

Accesibilidad y teclado

Nombra la navegación y traduce menuButtonAriaLabel. Usa Tab/Mayús+Tab para recorrer enlaces y botones nativos; Intro activa ambos y Espacio solo los botones. Tab desde el activador de un panel abierto en escritorio entra en su primer enlace o botón disponible. Escape cierra el panel y devuelve el foco al activador; sobre el botón móvil cierra la navegación móvil. Las flechas e Inicio/Fin conservan el comportamiento del navegador: es navegación, no un menú de aplicación. Item permanece dentro de los enlaces/botones de Core; Start/End pueden contener sus propios controles accesibles.

Tecla	Acción
`Tab`	Recorre las acciones principales, enlaces del panel abierto y controles móviles disponibles.
`Arrow keys`	Conservan el desplazamiento nativo del navegador; esta navegación no añade selección mediante flechas.
`Home / End`	Conservan el comportamiento nativo; usa Tab y Mayús+Tab para recorrer enlaces y botones.
`Enter`	Activa el enlace o botón nativo enfocado, incluido el activador de un panel.
`Space`	Activa el botón o activador de panel enfocado; los enlaces nativos usan Intro.
`Escape`	Cierra el panel y devuelve el foco a su activador.

API

Inputs y Outputs corresponden al paquete instalado. Los tipos con nombre enlazan a sus definiciones. Cada Template/proyección disponible tiene un ejemplo ejecutable.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`ariaLabel`	`string`	`'Main navigation'`	`[ariaLabel]`	Nombre accesible de la navegación/menú. Usa una etiqueta específica de esta región.
`ariaLabelledBy`	`string \| null`	`null`	`[ariaLabelledBy]`	Id de un elemento existente que nombra la navegación; tiene prioridad sobre ariaLabel.
`breakpoint`	`string`	`'960px'`	`[breakpoint]`	Umbral de ancho del viewport para la presentación móvil compacta, expresado en píxeles CSS.
`direction`	`NeuTextDirection`	`'ltr'`	`[direction]`	Dirección del texto y teclado: ltr o rtl.
`disabled`	`boolean`	`false`	`[disabled]`	Desactiva el botón/navegación. Los estados disabled de cada elemento pertenecen a items.
`id`	`string \| undefined`	Sin valor por defecto	`[id]`	Id estable opcional del elemento. Conserva ids únicos si muestras varios menús.
`items`	`readonly NeuMegaMenuItem[]`	`[]`	`[items]`	Entradas principales discriminadas: link, command o panel con columnas/grupos/hojas.
`menuButtonAriaLabel`	`string`	`'Toggle navigation'`	`[menuButtonAriaLabel]`	Nombre accesible del botón móvil; tradúcelo para tu aplicación.
`orientation`	`NeuMegaMenuOrientation`	`'horizontal'`	`[orientation]`	Diseño principal y orientación de teclado: horizontal o vertical.
`scrollHeight`	`string`	`'min(28rem, 70vh)'`	`[scrollHeight]`	Altura máxima del panel; su contenido se desplaza localmente cuando es necesario.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Nombre	Valor emitido	Uso en el template	Descripción
`itemClick`	`NeuMegaMenuItem \| NeuMegaMenuLeaf`	`(itemClick)="onItemClick($event)"`	Emite la hoja/acción activada. El command opcional se ejecuta antes; las entradas desactivadas no se activan.
`mobileActiveChange`	`boolean`	`(mobileActiveChange)="onMobileActiveChange($event)"`	Comunica si está abierta la navegación móvil; no es un Input de estado controlado.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Nombre	Mecanismo	Contrato
`NeuMegaMenuEndDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuMegaMenuEnd]`
`NeuMegaMenuItemDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuMegaMenuItem]`
`NeuMegaMenuStartDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuMegaMenuStart]`

NeuMegaMenuEndDirectiveVer ejemplo

Directiva pública de template

ng-template[neuMegaMenuEnd]

Declaración

Contexto completo

NeuMegaMenuItemDirectiveVer ejemplo

Directiva pública de template

ng-template[neuMegaMenuItem]

Declaración

Contexto completo

import type { NeuMegaMenuItemTemplateContext } from '@neural-ui/core/mega-menu';

import { NeuMegaMenuItemDirective } from '@neural-ui/core/mega-menu';

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<NeuMegaMenuItemTemplateContext>;

NeuMegaMenuStartDirectiveVer ejemplo

Directiva pública de template

ng-template[neuMegaMenuStart]

Declaración

Contexto completo

Cada ejemplo muestra un template diferente. Alterna entre Demo y Código para consultar su implementación, imports y estado.

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

NeuMegaMenuColumnTypeScript

import type { NeuMegaMenuGroup } from '@neural-ui/core/mega-menu';

import type { NeuMegaMenuColumn } from '@neural-ui/core/mega-menu';

// Declaración pública (solo referencia)
export interface NeuMegaMenuColumn {
  readonly groups: readonly NeuMegaMenuGroup[];
  readonly key: string;
}

NeuMegaMenuGroupTypeScript

import type { NeuMegaMenuLeaf } from '@neural-ui/core/mega-menu';

import type { NeuMegaMenuGroup } from '@neural-ui/core/mega-menu';

// Declaración pública (solo referencia)
export interface NeuMegaMenuGroup {
  readonly items: readonly NeuMegaMenuLeaf[];
  readonly key: string;
  readonly label?: string;
}

NeuMegaMenuItemTypeScript

import type { NeuMegaMenuPanel } from '@neural-ui/core/mega-menu';

import type { NeuMegaMenuItem } from '@neural-ui/core/mega-menu';

// Declaración pública (solo referencia)
export type NeuMegaMenuItem = (NeuMegaMenuEntry & NeuMegaMenuDestination & {
    readonly kind: 'link';
    readonly command?: never;
    readonly panel?: never;
}) | (NeuMegaMenuEntry & {
    readonly kind: 'command';
    readonly command: NeuMegaMenuCommand;
    readonly url?: never;
    readonly routerLink?: never;
    readonly panel?: never;
}) | (NeuMegaMenuEntry & {
    readonly kind: 'panel';
    readonly panel: NeuMegaMenuPanel;
    readonly url?: never;
    readonly routerLink?: never;
    readonly command?: never;
});

NeuMegaMenuItemTemplateContextTypeScript

import type { NeuMegaMenuItem } from '@neural-ui/core/mega-menu';
import type { NeuMegaMenuLeaf } from '@neural-ui/core/mega-menu';

import type { NeuMegaMenuItemTemplateContext } from '@neural-ui/core/mega-menu';

// Declaración pública (solo referencia)
export interface NeuMegaMenuItemTemplateContext {
  $implicit: NeuMegaMenuItem | NeuMegaMenuLeaf;
  active: boolean;
  index: number;
  level: 0 | 3;
}

NeuMegaMenuLeafTypeScript

import type { NeuMegaMenuLeaf } from '@neural-ui/core/mega-menu';

// Declaración pública (solo referencia)
export type NeuMegaMenuLeaf = (NeuMegaMenuEntry & NeuMegaMenuDestination & {
    readonly kind: 'link';
    readonly command?: never;
    readonly panel?: never;
}) | (NeuMegaMenuEntry & {
    readonly kind: 'command';
    readonly command: NeuMegaMenuCommand;
    readonly url?: never;
    readonly routerLink?: never;
    readonly panel?: never;
});

NeuMegaMenuOrientationTypeScript

import type { NeuMegaMenuOrientation } from '@neural-ui/core/mega-menu';

// Declaración pública (solo referencia)
export type NeuMegaMenuOrientation = 'horizontal' | 'vertical';

NeuMegaMenuPanelTypeScript

import type { NeuMegaMenuColumn } from '@neural-ui/core/mega-menu';

import type { NeuMegaMenuPanel } from '@neural-ui/core/mega-menu';

// Declaración pública (solo referencia)
export interface NeuMegaMenuPanel {
  readonly columns: readonly NeuMegaMenuColumn[];
}

Estilos y tokens

Utiliza los tokens públicos disponibles. La resolución de iconos y el diseño que rodea al ejemplo pertenecen a la aplicación. Comprueba ambos temas y pantallas estrechas.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-border`	Bordes normales de controles y celdas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.08)`
`--neu-primary`	Color de marca en controles activos y énfasis	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-primary-soft`	Superficie tenue de selección o estado activo	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`var(--neu-primary-50)`
`--neu-surface`	Superficie principal del campo, cabecera o control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`
`--neu-surface-2`	Superficies secundarias y filas alternas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#f1f5f9`
`--neu-text`	Color del texto principal y de los iconos que lo heredan	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#0f172a`
`--neu-shadow-lg`	Elevación de la superficie o capa	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`0 10px 30px rgba(15, 23, 42, 0.1), 0 4px 8px rgba(15, 23, 42, 0.04)`

Componentes relacionados

Compara los componentes de navegación relacionados para elegir la interacción adecuada.

Uso

Ejemplos

Prueba y configura

Datos y contenido

Accesibilidad y teclado

API

Inputs

Outputs

Templates

Contenido inicial

Contenido principal y de hojas

Contenido final

Public Types

Estilos y tokens

Tokens específicos

Tokens compartidos utilizados