Referencia API

Aquí tienes el contrato completo de nav: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.

Inputs

Ajusta nav a tu gusto con 4 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`items`Obligatorio	`HubNavItem[]`	—	Array de elementos de navegación a renderizar. Cada elemento define su tipo (link, dropdown, header, separator, custom), label, ruta, icono, badge, children y más.
`config`	`Partial<HubNavConfig>`	`{}`	Anulaciones de configuración parciales que se combinan con los valores por defecto globales. Controla la orientación, el disparador del dropdown, el modo de colapso, el breakpoint, la posición y más.
`navClass`	`string`	`''`	Clase CSS adicional aplicada al elemento contenedor del nav.
`itemTemplate`	`TemplateRef<HubNavItemTemplateContext> \| null`	`null`	Plantilla personalizada opcional para renderizar los elementos del nav mediante input binding. La directiva hubNavItemTemplate tiene prioridad sobre este input.

Outputs

Reacciona a lo que hace nav: 5 eventos a los que enganchar tu lógica.

Nombre	Tipo	Descripción
`itemClick`	`OutputEmitterRef<HubNavItem>`	Se emite cuando se hace clic en un elemento de tipo link. Proporciona el HubNavItem en el que se hizo clic.
`dropdownOpen`	`OutputEmitterRef<HubNavItem>`	Se emite cuando se abre un elemento de tipo dropdown.
`dropdownClose`	`OutputEmitterRef<HubNavItem>`	Se emite cuando se cierra un elemento de tipo dropdown.
`mobileToggle`	`OutputEmitterRef<boolean>`	Se emite cuando se alterna el panel móvil. Proporciona true cuando está abierto y false cuando está cerrado.
`panelChange`	`OutputEmitterRef<HubNavPanelEvent>`	Se emite cuando un panel se abre, se cierra, se profundiza o se retrocede. Proporciona el elemento, el índice del panel y el tipo de acción.

Templates

Hazlo tuyo — 3 plantillas para proyectar tu propio marcado.

Nombre	Descripción	Ejemplo
`hubNavStart`	Proyecta contenido personalizado en el slot de inicio. Horizontal: inicio visual (izquierda en LTR, derecha en RTL). Vertical: parte superior de la columna principal.	`<hub-nav [items]="items"> <ng-template hubNavStart let-collapsed="collapsed"> <img src="logo.svg" alt="Brand" /> @if (!collapsed) { <span>App Name</span> } </ng-template> </hub-nav>`
`hubNavEnd`	Proyecta contenido personalizado en el slot final. Horizontal: final visual (derecha en LTR, izquierda en RTL). Vertical: parte inferior de la columna principal.	`<hub-nav [items]="items"> <ng-template hubNavEnd> <button type="button">Sign out</button> </ng-template> </hub-nav>`
`hubNavItemTemplate`	Sobrescribe el renderizado por defecto del elemento con una plantilla personalizada. Recibe HubNavItemTemplateContext con las propiedades $implicit (item), active, expanded y depth.	`<hub-nav [items]="items"> <ng-template hubNavItemTemplate let-item let-active="active"> <span [class.fw-bold]="active">{{ item.label }}</span> @if (item.badge) { <span class="badge">{{ item.badge }}</span> } </ng-template> </hub-nav>`