Componente Navigation Menu para Angular | ng-hub-ui-nav

Componente de navegación para Angular con dropdowns, paneles drill-down, colapso responsive, integración con Router y theming mediante variables CSS.

Visión General

Por qué los equipos buscan esta librería

Recurre a este componente de navegación para Angular cuando necesites menús horizontales, verticales o drill-down con conocimiento del Router y patrones UX reutilizables.

Instalación

npm install ng-hub-ui-nav

Ir a

Ideal para

  • app shells
  • dashboards de administración
  • menús de documentación
  • navegación responsive

Sobre nav

ng-hub-ui-nav resulta útil cuando una aplicación Angular supera un menú superior simple. Cubre sidebars verticales, árboles dropdown, navegación anidada y patrones responsive de colapso que aparecen en sitios de documentación, dashboards y shells empresariales.

Guías de uso

Navegación principal

Navegación horizontal y vertical esencial con renderizado de elementos basado en datos, iconos, badges y estados deshabilitados.

Ejemplos:
Navegación horizontal básica

Navegación horizontal básica

Navegación vertical en acordeón

Navegación vertical en acordeón

Navegación vertical desplegable

Navegación vertical desplegable

Anidamiento de dropdowns

Menús dropdown multinivel ilimitados con modos de activación por clic, hover o combinados. Incluye elementos separadores y de cabecera.

Ejemplos:
Menús desplegables anidados de varios niveles

Menús desplegables anidados de varios niveles

Cabeceras y separadores

Cabeceras y separadores

Activadores de menú desplegable

Activadores de menú desplegable

Estados

Demuestra los elementos raíz y anidados deshabilitados y su comportamiento de interacción.

Ejemplos:
Estados deshabilitados

Estados deshabilitados

Etiquetas truncadas y tooltip

Etiquetas truncadas y tooltip

Narrow sidebar — hover a clipped item to read its full label.

Comportamiento responsive

Colapso responsive, renderizado móvil y comportamiento de slots en RTL.

Ejemplos:
Modos de colapso responsive

Modos de colapso responsive

Offcanvas mode

Click the toggler to open the mobile panel.

Dropdown mode

Click the toggler to open the mobile panel.

Fullscreen mode

Click the toggler to open the mobile panel.

RTL con slots de inicio/fin

RTL con slots de inicio/fin

Slots y templates

Proyección de slots de inicio y fin y templates de elemento personalizados para construir interfaces de navegación a medida.

Ejemplos:
Slots de inicio y fin

Slots de inicio y fin

Plantilla de elemento personalizada

Plantilla de elemento personalizada

Integración con el router

Enlaces del router, query params, fragments y coincidencia de estado activo mediante las opciones de routerLinkActive.

Ejemplos:
Integración con el router y estados activos

Integración con el router y estados activos

This example uses real router links. Items pointing to /nav and /nav/api can show active state while browsing nav documentation tabs.

Eventos

Observa los eventos de interacción de enlaces, dropdowns, toggles móviles y navegación por paneles.

Ejemplos:
API de eventos

API de eventos

Last event:

{
  "name": "none",
  "payload": null
}

Drill-down por paneles

Navegación por paneles apilados en la que al hacer clic en un dropdown se abren sus elementos hijos en un panel lateral. Admite un máximo de paneles configurable, drill-down con navegación hacia atrás y posicionamiento de la barra lateral a izquierda o derecha.

Ejemplos:
Navegación de paneles en profundidad

Navegación de paneles en profundidad

Main content area — the sidebar fills 100% of the container height.

Sobrescritura de expandMode por elemento

Sobrescritura de expandMode por elemento

Modo panel de barra lateral derecha

Modo panel de barra lateral derecha

Main content area — the sidebar is placed on the right and panels extend to the left.

Características clave

Cambios recientes

Version 21.1.0 - 3/19/26, 12:00 AM

added: Panel drill-down expand mode with stacked side panels, configurable max visible panels, and drill-down with back navigation.

added: Per-item expandMode override (accordion, flyout, or panel) on HubNavItem.

added: Sidebar positioning with sidebarSide config (left or right).

added: Panel keyboard navigation (Escape, ArrowLeft) and automatic focus management.

added: Mobile fallback: panel mode degrades to accordion when collapsed.

added: CSS custom properties for panel styling (--hub-nav-panel-*).

Version 21.0.0 - 3/19/26, 12:00 AM

added: Initial release with horizontal and vertical navigation.

added: Data-driven API with HubNavItem interface supporting link, dropdown, header, separator, and custom types.

added: Unlimited dropdown nesting with recursive rendering.

added: Responsive collapsing with offcanvas, dropdown, and fullscreen mobile panel modes.

added: Vertical accordion and flyout expand modes.

added: Start/end slots via hubNavStart and hubNavEnd directives, plus custom item templates via hubNavItemTemplate.

added: Full Angular Router integration with routerLink, routerLinkActive, fragment, and queryParams support.

added: WCAG 2.1 AA keyboard navigation with WAI-ARIA menubar/menu pattern.

added: Complete CSS custom properties token set with 60+ variables.

added: HubNavConfigService with InjectionToken for global default configuration.

Librerías relacionadas

ng-hub-ui-breadcrumbs ng-hub-ui-portal ng-hub-ui-stepper