TieredMenu | Neural UI v2

Uso

Usa NeuMenuItem con claves estables y children. A diferencia de los grupos en línea de Menu, TieredMenu abre los niveles hijos en paneles conectados. Las hojas admiten acciones de la aplicación y destinos de enlace. Las entradas ocultas, desactivadas y los separadores conservan su comportamiento. neuMenuItem sustituye el contenido visible en todos los niveles.

Ejemplos

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

Seleccionado: — · itemClick: 0 · Acciones: 0

expandedKeys: —

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

expandedKeys: —

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-tiered-menu
  [items]="items"
  ariaLabel="Navegación de ejemplo"
  [expandedKeys]="expandedKeys()"
  (expandedKeysChange)="expandedKeys.set($event)"
  (itemClick)="selectItem($event)"
/>

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.

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([]);

Datos y contenido

Proporciona expandedKeys y acepta expandedKeysChange para controlar la ruta abierta; omítelo para el estado interno. Abrir una rama sustituye la ruta del grupo hermano anterior. Activar una hoja ejecuta command, emite itemClick y propone cerrar los submenús. La interacción exterior también propone cerrarlos.

Accesibilidad y teclado

Usa arriba/abajo e Inicio/Fin dentro de un nivel, derecha/izquierda para entrar o regresar desde un submenú (invertidas en RTL), y Escape para cerrar el nivel más profundo y devolver el foco. La búsqueda por letras encuentra etiquetas. Mantén el contenido personalizado como presentación: el control del menú debe seguir siendo el único destino de foco.

Tecla	Acción
`Tab`	Entra o sale de las acciones disponibles del menú.
`ArrowUp / ArrowDown`	Recorre las acciones disponibles del nivel actual.
`ArrowRight / ArrowLeft`	Entra o vuelve de un submenú; las direcciones se invierten en RTL.
`Home`	Enfoca la primera acción disponible del nivel.
`End`	Enfoca la última acción disponible del nivel.
`Enter`	Activa la acción habilitada enfocada o abre su grupo.
`Space`	Activa la acción habilitada enfocada o abre su grupo.
`A–Z`	Busca acciones disponibles por su etiqueta.
`Escape`	Cierra el submenú abierto más profundo; un menú emergente devuelve el foco al 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`	`'Tiered menu'`	`[ariaLabel]`	Nombre accesible de la navegación/menú. Usa una etiqueta específica de esta región.
`expandedKeys`	`readonly string[] \| undefined`	`undefined`	`[expandedKeys]`	Claves de ramas aplicadas; undefined activa la expansión gestionada por el componente.
`items`	`NeuMenuItem[]`	`[]`	`[items]`	Datos de acciones con claves únicas; children crea grupos. Core no modifica el array.

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
`expandedKeysChange`	`string[]`	`(expandedKeysChange)="onExpandedKeysChange($event)"`	Propone las próximas claves de ramas. Actualiza expandedKeys para aceptar un cambio controlado.
`itemClick`	`NeuMenuItem`	`(itemClick)="onItemClick($event)"`	Emite la hoja/acción activada. El command opcional se ejecuta antes; las entradas desactivadas no se activan.

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
`ng-template[neuMenuItem]`	Proyección de contenido	`<ng-content select="ng-template[neuMenuItem]" />`
`NeuMenuItemDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuMenuItem]`

ng-template[neuMenuItem] Proyección de contenido <ng-content select="ng-template[neuMenuItem]" />

NeuMenuItemDirectiveVer ejemplo

Directiva pública de template

ng-template[neuMenuItem]

Declaración

Contexto completo

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;
}>;

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.

NeuIconKeyTypeScript

NeuMenuItemTypeScript

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.

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
Sin datos

Componentes relacionados

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