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-navIr 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
Core Navigation
Essential horizontal and vertical navigation with data-driven item rendering, icons, badges, and disabled states.
Ejemplos:
Basic Horizontal Navigation
Basic Horizontal Navigation
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Vertical Accordion Navigation
Vertical Accordion Navigation
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Vertical Flyout Navigation
Vertical Flyout Navigation
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Dropdown Nesting
Unlimited multi-level dropdown menus with click, hover, or combined trigger modes. Includes separator and header items.
Ejemplos:
Nested Multi-Level Dropdowns
Nested Multi-Level Dropdowns
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Headers & Separators
Headers & Separators
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Dropdown Triggers
Dropdown Triggers
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
States
Demonstrates disabled root and nested items and their interaction behavior.
Ejemplos:
Disabled States
Disabled States
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Responsive Behavior
Responsive collapsing, mobile rendering, and RTL slot behavior.
Ejemplos:
Responsive Collapse Modes
Responsive Collapse Modes
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
RTL with Start/End Slots
RTL with Start/End Slots
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Slots & Templates
Start/end slot projection and custom item templates to build tailored navigation UIs.
Ejemplos:
Start & End Slots
Start & End Slots
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Custom Item Template
Custom Item Template
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Router Integration
Router links, query params, fragments and active-state matching through routerLinkActive options.
Ejemplos:
Router Integration & Active States
Router Integration & Active States
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Eventos
Observe interaction events for links, dropdowns, mobile toggles and panel navigation.
Ejemplos:
Events API
Events API
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Panel Drill-Down
Stacked panel navigation where clicking a dropdown opens its children in a side panel. Supports configurable max panels, drill-down with back navigation, and left/right sidebar positioning.
Ejemplos:
Panel Drill-Down Navigation
Panel Drill-Down Navigation
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Per-item expandMode Override
Per-item expandMode Override
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Right Sidebar Panel Mode
Right Sidebar Panel Mode
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Características clave
Navegación horizontal y vertical
Resuelve top bars, sidebars y superficies de navegación mixtas con una sola librería Angular.
Menús anidados y drill-down
Útil para productos de administración y experiencias de documentación donde la profundidad de información crece rápido.
Shells responsive de aplicación
Adapta el comportamiento de navegación entre sidebars de escritorio y estados móviles colapsados.
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.