Angular Navigationsmenü-Komponente | ng-hub-ui-nav
Angular Navigationskomponente mit Dropdowns, Drill-down-Panels, responsivem Einklappen, Router-Integration und Theming über CSS-Variablen.
Übersicht
Warum Teams nach dieser Bibliothek suchen
Greife zu dieser Angular Navigationskomponente, wenn du horizontale, vertikale oder Drill-down-Menüs mit Router-Bewusstsein und wiederverwendbaren UX-Mustern benötigst.
Installieren
npm install ng-hub-ui-navSpringen zu
Ideal für
- App-Shells
- Admin-Dashboards
- Dokumentationsmenüs
- responsive Navigation
Über nav
ng-hub-ui-nav ist nützlich, wenn Angular-Anwendungen einem einfachen oberen Menü entwachsen. Es deckt vertikale Sidebars, Dropdown-Bäume, verschachtelte Navigation und responsive Einklapp-Muster ab, wie sie in Dokumentationsseiten, Dashboards und Enterprise-Shells vorkommen.
Funktionsleitfäden
Dropdown-Verschachtelung
Unbegrenzte mehrstufige Dropdown-Menüs mit Klick-, Hover- oder kombinierten Trigger-Modi. Enthält Trennzeichen- und Header-Elemente.
Beispiele:
Verschachtelte mehrstufige Dropdowns
Verschachtelte mehrstufige Dropdowns
Kopfzeilen & Trennlinien
Kopfzeilen & Trennlinien
Dropdown-Auslöser
Dropdown-Auslöser
Zustände
Demonstriert deaktivierte Root- und verschachtelte Elemente sowie deren Interaktionsverhalten.
Beispiele:
Deaktivierte Zustände
Deaktivierte Zustände
Responsives Verhalten
Responsives Einklappen, mobiles Rendering und RTL-Slot-Verhalten.
Beispiele:
Responsive Einklappmodi
Responsive Einklappmodi
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 mit Start-/End-Slots
RTL mit Start-/End-Slots
Slots & Templates
Start-/End-Slot-Projektion und benutzerdefinierte Element-Templates zum Erstellen maßgeschneiderter Navigations-UIs.
Beispiele:
Start- & End-Slots
Start- & End-Slots
Benutzerdefinierte Elementvorlage
Benutzerdefinierte Elementvorlage
Router-Integration
Router-Links, Query-Parameter, Fragmente und Active-State-Matching über routerLinkActive-Optionen.
Beispiele:
Router-Integration & aktive Zustände
Router-Integration & aktive Zustände
This example uses real router links. Items pointing to /nav and /nav/api can show active state while browsing nav documentation tabs.
Events
Beobachten Sie Interaktionsereignisse für Links, Dropdowns, mobile Toggles und Panel-Navigation.
Beispiele:
Ereignis-API
Ereignis-API
Last event:
{
"name": "none",
"payload": null
}Panel-Drill-Down
Gestapelte Panel-Navigation, bei der das Klicken auf ein Dropdown dessen untergeordnete Elemente in einem Seitenpanel öffnet. Unterstützt konfigurierbare maximale Panel-Anzahl, Drill-Down mit Zurück-Navigation und links-/rechtsseitige Sidebar-Positionierung.
Beispiele:
Panel-Drilldown-Navigation
Panel-Drilldown-Navigation
expandMode-Überschreibung pro Element
expandMode-Überschreibung pro Element
Rechter Seitenleisten-Panel-Modus
Rechter Seitenleisten-Panel-Modus
Main content area — the sidebar is placed on the right and panels extend to the left.
Hauptfunktionen
Letzte Änderungen
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.