Nav

Uso

Cada NeuNavItem contiene id, label y una clave de icono. route usa el router de Angular y href es un destino externo. children crea grupos desplegables, active marca la entrada actual y badge/badgeTone comunican estado. Los iconos se resuelven con el proveedor de la aplicación; una clave vacía omite el gráfico.

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-nav
  [items]="items"
  ariaLabel="Navegación de ejemplo"
  [collapsed]="collapsed()"
  [collapsible]="true"
  (collapsedChange)="collapsed.set($event)"
  [collapseLabel]="'Contraer navegación'"
  [expandLabel]="'Expandir navegación'"
>
  <span neu-nav-brand class="menus-brand">
    <app-navigation-example-icon kind="home" size="24" />
    <span>Neural Studio</span>
  </span>
  <app-navigation-example-icon neu-nav-brand-icon kind="home" size="24" />
</neu-nav>

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

export const items = [
  {
    "id": "workspace",
    "label": "Espacio de trabajo",
    "icon": "home",
    "route": "/es/components/nav",
    "active": true
  },
  {
    "id": "components",
    "label": "Componentes",
    "icon": "folder",
    "children": [
      {
        "id": "button",
        "label": "Button",
        "icon": "file",
        "route": "/es/components/button"
      },
      {
        "id": "table",
        "label": "Table",
        "icon": "file",
        "route": "/es/components/table",
        "badge": "3",
        "badgeTone": "info"
      },
      {
        "id": "forms",
        "label": "Controles de formulario",
        "icon": "folder",
        "children": [
          {
            "id": "date-input",
            "label": "DateInput",
            "icon": "file",
            "route": "/es/components/date-input"
          }
        ]
      }
    ]
  },
  {
    "id": "settings",
    "label": "Ajustes",
    "icon": "settings",
    "route": "/es/getting-started/project-configuration",
    "disabled": true
  }
];

export const collapsed = signal(false);

Datos y contenido

Proporciona collapsed y acepta collapsedChange para controlar el ancho; omite collapsed para el estado interno. collapsible indica si se muestra el botón, no el estado aplicado. Core gestiona los grupos y los paneles del modo contraído. La aplicación aporta rutas y estado active. Proyecta icono de marca, texto de marca y pie con sus atributos específicos. Nav no tiene Output itemClick.

Accesibilidad y teclado

Traduce expandLabel/collapseLabel y nombra la navegación. Usa enlaces/botones nativos con Tab e Intro/Espacio. Los grupos exponen aria-expanded y los destinos activos aria-current. Los paneles contraídos conservan controles nombrados y devolución de foco con Escape. Revisa el contenido de marca y pie en ambos diseños.

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.

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 { NeuNavItem } from '@neural-ui/core/nav';

// Declaración pública (solo referencia)
export interface NeuNavItem {
  active?: boolean;
  badge?: string;
  badgeTone?: 'neutral' | 'success' | 'warning' | 'danger' | 'info';
  children?: NeuNavItem[];
  disabled?: boolean;
  href?: string;
  icon: NeuIconKey;
  id: string;
  label: string;
  route?: string;
}

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