Angular Navigationsmenü-Komponente | ng-hub-ui-nav

Angular Navigationskomponente mit Dropdowns, Drill-down-Panels, responsivem Einklappen, Router-Integration und Theming über CSS-Variablen.

Interaktive Beispiele

Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.

Kernnavigation

Grundlegende horizontale und vertikale Navigation mit datengetriebenem Element-Rendering, Icons, Badges und deaktivierten Zuständen.

Grundlegende horizontale Navigation

Vertikale Akkordeon-Navigation

Vertikale Flyout-Navigation

Dropdown-Verschachtelung

Unbegrenzte mehrstufige Dropdown-Menüs mit Klick-, Hover- oder kombinierten Trigger-Modi. Enthält Trennzeichen- und Header-Elemente.

Verschachtelte mehrstufige Dropdowns

Kopfzeilen & Trennlinien

Dropdown-Auslöser

Zustände

Demonstriert deaktivierte Root- und verschachtelte Elemente sowie deren Interaktionsverhalten.

Deaktivierte Zustände

Gekürzte Labels & Tooltip

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

Responsives Verhalten

Responsives Einklappen, mobiles Rendering und RTL-Slot-Verhalten.

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

Desktop-Icon-Leiste

Klappt die vertikale Navigation zu einer reinen Icon-Leiste ein, die jeden Bereich einen Klick entfernt hält: Beschriftungen erscheinen als Tooltips, Gruppen öffnen sich als Overlay-Flyouts, und die App besitzt den Umschalter und die Persistenz über die bidirektionale rail-Bindung.

Eingeklappte Icon-Leiste

Content area — the built-in toggle on the sidebar edge collapses the nav into an icon rail, returning horizontal space to data-dense screens. Hover a rail item to see its label; click a group to open its flyout.

Slots & Templates

Start-/End-Slot-Projektion und benutzerdefinierte Element-Templates zum Erstellen maßgeschneiderter Navigations-UIs.

Start- & End-Slots

Benutzerdefinierte Elementvorlage

Router-Integration

Router-Links, Query-Parameter, Fragmente und Active-State-Matching über routerLinkActive-Optionen.

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.

Travel needs a real navigation to travel between, so the live instance is the sidebar of this very page: click two library entries and watch the mark move. It is deliberately reserved for a choice — a scroll spy reports position by replacing the URL rather than pushing one, and following that stepped this documentation's own menu through twenty highlight changes in six seconds of ordinary reading. That is what followReplacedUrls governs: true follows every report, a number of milliseconds follows only once they go quiet (this site uses 400), and false never follows.

Events

Beobachten Sie Interaktionsereignisse für Links, Dropdowns, mobile Toggles und Panel-Navigation.

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.

Panel-Drilldown-Navigation

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

expandMode-Überschreibung pro Element

Rechter Seitenleisten-Panel-Modus

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

Vertikale klebende Seitenleiste

Sticky Sidebar

The navigation stays pinned while the content scrolls, which makes it useful for documentation pages and long settings views.

Section One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod nunc sed velit tincidunt, in dictum sem gravida.

Nam tincidunt, eros non posuere ultricies, ex risus porttitor mi, at vehicula nibh arcu nec risus. Sed eget sem id justo feugiat egestas nec vel sem.

Section Two

Curabitur ultrices dui sit amet sem iaculis, a faucibus ligula tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.

Nam tincidunt, eros non posuere ultricies, ex risus porttitor mi, at vehicula nibh arcu nec risus. Sed eget sem id justo feugiat egestas nec vel sem.

Section Three

Suspendisse potenti. Mauris id dolor consequat, pharetra arcu non, rhoncus ligula. Donec at ligula a ipsum suscipit sollicitudin.

Nam tincidunt, eros non posuere ultricies, ex risus porttitor mi, at vehicula nibh arcu nec risus. Sed eget sem id justo feugiat egestas nec vel sem.

Section Four

Aliquam erat volutpat. Duis vel mi sit amet lorem feugiat aliquet. Donec mattis, massa et commodo suscipit, mauris arcu cursus dolor.

Nam tincidunt, eros non posuere ultricies, ex risus porttitor mi, at vehicula nibh arcu nec risus. Sed eget sem id justo feugiat egestas nec vel sem.