Angular Navigation Menu Component | ng-hub-ui-nav
Angular navigation component with dropdowns, drill-down panels, responsive collapse, router integration and CSS-variable theming.
Overview
Why teams search for this library
Reach for this Angular navigation component when you need horizontal, vertical or drill-down menus with router awareness and reusable UX patterns.
Install
npm install ng-hub-ui-navJump to
Ideal for
- app shells
- admin dashboards
- documentation menus
- responsive navigation
About nav
ng-hub-ui-nav is useful when Angular applications outgrow a simple top menu. It covers vertical sidebars, dropdown trees, nested navigation and responsive collapse patterns that appear in documentation sites, dashboards and enterprise shells.
Feature guides
Dropdown Nesting
Unlimited multi-level dropdown menus with click, hover, or combined trigger modes. Includes separator and header items.
Examples:
Nested Multi-Level Dropdowns
Nested Multi-Level Dropdowns
Headers & Separators
Headers & Separators
Dropdown Triggers
Dropdown Triggers
States
Demonstrates disabled root and nested items and their interaction behavior.
Examples:
Disabled States
Disabled States
Responsive Behavior
Responsive collapsing, mobile rendering, and RTL slot behavior.
Examples:
Responsive Collapse Modes
Responsive Collapse Modes
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 with Start/End Slots
RTL with Start/End Slots
Slots & Templates
Start/end slot projection and custom item templates to build tailored navigation UIs.
Examples:
Start & End Slots
Start & End Slots
Custom Item Template
Custom Item Template
Router Integration
Router links, query params, fragments and active-state matching through routerLinkActive options.
Examples:
Router Integration & Active States
Router Integration & Active States
This example uses real router links. Items pointing to /nav and /nav/api can show active state while browsing nav documentation tabs.
Events
Observe interaction events for links, dropdowns, mobile toggles and panel navigation.
Examples:
Events API
Events API
Last event:
{
"name": "none",
"payload": null
}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.
Examples:
Panel Drill-Down Navigation
Panel Drill-Down Navigation
Per-item expandMode Override
Per-item expandMode Override
Right Sidebar Panel Mode
Right Sidebar Panel Mode
Main content area — the sidebar is placed on the right and panels extend to the left.
Key features
Recent changes
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.