Menu

Uso

Define items con claves únicas y etiquetas legibles. children crea un grupo en línea; separator añade un separador, visible:false elimina una entrada y disabled impide activarla. icon se resuelve con el proveedor de iconos de tu aplicación. badge y shortcut añaden contexto compacto; shortcut es una indicación visual, no un atajo registrado.

Ejemplos

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

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.

<neu-menu
  [items]="items"
  ariaLabel="Navegación de ejemplo"
  [expandedKeys]="expandedKeys()"
  (expandedKeysChange)="expandedKeys.set($event)"
  (itemClick)="selectItem($event)"
/>

import { signal } from '@angular/core';

export const items = [
  {
    "key": "new",
    "label": "Nuevo documento",
    "icon": "file",
    "shortcut": "Ctrl+N",
    "command": () => { /* Handler in the complete example. */ }
  },
  {
    "key": "workspace",
    "label": "Espacio de trabajo",
    "icon": "folder",
    "badge": 3,
    "children": [
      {
        "key": "drafts",
        "label": "Borradores",
        "children": [
          {
            "key": "review",
            "label": "Revisar borradores",
            "command": () => { /* Handler in the complete example. */ }
          }
        ]
      },
      {
        "key": "shared",
        "label": "Documentos compartidos",
        "command": () => { /* Handler in the complete example. */ }
      }
    ]
  },
  {
    "key": "divider",
    "label": "",
    "separator": true
  },
  {
    "key": "export",
    "label": "Exportar informe",
    "icon": "file",
    "disabled": true,
    "command": () => { /* Handler in the complete example. */ }
  },
  {
    "key": "search",
    "label": "Buscar documentos",
    "icon": "search",
    "visible": false,
    "command": () => { /* Handler in the complete example. */ }
  }
];

export const expandedKeys = signal([]);

Activar desde código

Usa activate(item) para activar una acción desde tu aplicación. Un elemento habilitado sin hijos ejecuta su command opcional y emite itemClick; un grupo cambia la expansión. Los elementos deshabilitados, ocultos y los separadores no se pueden activar.

Datos y contenido

Asigna expandedKeys y acepta expandedKeysChange para controlar los grupos abiertos. Omite expandedKeys para usar expansión local; los grupos en línea empiezan abiertos. Una hoja ejecuta su command opcional y emite itemClick. Activar una rama solo propone expansión. Conecta las acciones a tu aplicación mediante command o itemClick, incluida la navegación. activate(item) ofrece ese mismo flujo protegido para activar una acción desde código.

Accesibilidad y teclado

Tab entra en la lista. Arriba/abajo, Inicio/Fin y la búsqueda por letras mueven el foco entre elementos disponibles. Intro/Espacio activan una hoja; izquierda/derecha abren, entran o regresan desde un grupo según la dirección del texto. Elementos ocultos, separadores y acciones desactivadas quedan fuera del recorrido. Los Templates sustituyen el contenido, no el control nativo que lo envuelve.

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.

Outputs

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

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

// Declaración pública (solo referencia)
export declare class NeuMenuItemDirective {
}

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

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

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<{
    $implicit: NeuMenuItem;
}>;

Métodos públicos

Public Types

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

import type { NeuIconKey } from '@neural-ui/core/foundation';

// Declaración pública (solo referencia)
export type NeuIconKey = string;

import type { NeuIconKey } from '@neural-ui/core/foundation';

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

// Declaración pública (solo referencia)
interface NeuMenuItem {
  active?: boolean;
  badge?: string | number;
  children?: NeuMenuItem[];
  command?: (event: {
    originalEvent: Event;
    item: NeuMenuItem;
}) => void;
  data?: unknown;
  disabled?: boolean;
  icon?: NeuIconKey;
  key: string;
  label: string;
  rel?: string;
  routerLink?: string | unknown[];
  separator?: boolean;
  shortcut?: string;
  target?: string;
  tooltip?: string;
  url?: string;
  visible?: boolean;
}

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.

Componentes relacionados

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

• MenuButton
• TieredMenu
• Menubar