Menubar

Uso

Proporciona una colección NeuMenuItem. Las hojas principales actúan directamente; las entradas con children abren paneles MenuButton. visible:false oculta entradas y disabled impide interactuar. neuMenuItem permite sustituir el contenido, también en los elementos del panel hijo. Usa etiquetas principales breves y un ariaLabel descriptivo.

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-menubar
  [items]="items"
  ariaLabel="Navegación de ejemplo"
  (itemClick)="selectItem($event)"
/>

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. */ }
  }
];

Datos y contenido

itemClick comunica la hoja activada. Las acciones pertenecen a los datos del elemento y se ejecutan al activarlo. El componente gestiona el desplegable abierto; no expone un Input open. Cambiar entre grupos con un desplegable abierto transfiere ese estado y no requiere otro clic.

Accesibilidad y teclado

Tab entra en la barra; izquierda/derecha recorren las acciones disponibles e Inicio/Fin van a los extremos. Abajo/arriba abren un grupo en el primer/último elemento; dentro se usa el teclado de Menu. Escape cierra el panel y devuelve el foco al botón. La dirección sigue al documento.

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

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.

• Menu
• MenuButton
• TieredMenu