Composant Menu de Navigation Angular | ng-hub-ui-nav
Composant de navigation Angular avec dropdowns, panneaux drill-down, repli responsive, intégration au Router et theming via variables CSS.
Vue d’ensemble
Pourquoi les équipes recherchent cette bibliothèque
Optez pour ce composant de navigation Angular lorsque vous avez besoin de menus horizontaux, verticaux ou drill-down avec connaissance du Router et des schémas UX réutilisables.
Installation
npm install ng-hub-ui-navAller à
Idéal pour
- app shells
- tableaux de bord d'administration
- menus de documentation
- navigation responsive
À propos de nav
ng-hub-ui-nav est utile lorsqu'une application Angular dépasse un simple menu supérieur. Il couvre les barres latérales verticales, les arbres dropdown, la navigation imbriquée et les schémas de repli responsive que l'on retrouve dans les sites de documentation, les tableaux de bord et les shells d'entreprise.
Guides de fonctionnalités
Imbrication de listes déroulantes
Menus déroulants multi-niveaux illimités avec modes de déclenchement par clic, survol ou combinés. Inclut des éléments séparateurs et d'en-tête.
Exemples:
Menus déroulants imbriqués multi-niveaux
Menus déroulants imbriqués multi-niveaux
En-têtes et séparateurs
En-têtes et séparateurs
Déclencheurs de menu déroulant
Déclencheurs de menu déroulant
États
Illustre les éléments racine et imbriqués désactivés ainsi que leur comportement d'interaction.
Exemples:
États désactivés
États désactivés
Comportement responsive
Réduction responsive, rendu mobile et comportement des slots en RTL.
Exemples:
Modes de repli responsive
Modes de repli 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 avec slots de début/fin
RTL avec slots de début/fin
Slots et templates
Projection de slots start/end et templates d'élément personnalisés pour construire des interfaces de navigation sur mesure.
Exemples:
Slots de début et de fin
Slots de début et de fin
Modèle d'élément personnalisé
Modèle d'élément personnalisé
Intégration au Router
Liens de router, query params, fragments et correspondance de l'état actif via les options de routerLinkActive.
Exemples:
Intégration du routeur et états actifs
Intégration du routeur et états actifs
This example uses real router links. Items pointing to /nav and /nav/api can show active state while browsing nav documentation tabs.
Événements
Observez les événements d'interaction pour les liens, listes déroulantes, bascules mobiles et la navigation par panneaux.
Exemples:
API d'événements
API d'événements
Last event:
{
"name": "none",
"payload": null
}Drill-down par panneaux
Navigation par panneaux empilés où cliquer sur une liste déroulante ouvre ses enfants dans un panneau latéral. Prend en charge un nombre maximal de panneaux configurable, le drill-down avec navigation arrière et un positionnement de barre latérale à gauche/droite.
Exemples:
Navigation par exploration de panneaux
Navigation par exploration de panneaux
Surcharge d'expandMode par élément
Surcharge d'expandMode par élément
Mode panneau de barre latérale droite
Mode panneau de barre latérale droite
Main content area — the sidebar is placed on the right and panels extend to the left.
Fonctionnalités clés
Changements récents
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.