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-nav

Jump 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

Core Navigation

Essential horizontal and vertical navigation with data-driven item rendering, icons, badges, and disabled states.

Examples:
Basic Horizontal Navigation

Basic Horizontal Navigation

Live preview is not available for this example yet.

Code
Vertical Accordion Navigation

Vertical Accordion Navigation

Live preview is not available for this example yet.

Code
Vertical Flyout Navigation

Vertical Flyout Navigation

Live preview is not available for this example yet.

Code

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

Live preview is not available for this example yet.

Code
Headers & Separators

Headers & Separators

Live preview is not available for this example yet.

Code
Dropdown Triggers

Dropdown Triggers

Live preview is not available for this example yet.

Code

States

Demonstrates disabled root and nested items and their interaction behavior.

Examples:
Disabled States

Disabled States

Live preview is not available for this example yet.

Code

Responsive Behavior

Responsive collapsing, mobile rendering, and RTL slot behavior.

Examples:
Responsive Collapse Modes

Responsive Collapse Modes

Live preview is not available for this example yet.

Code
RTL with Start/End Slots

RTL with Start/End Slots

Live preview is not available for this example yet.

Code

Slots & Templates

Start/end slot projection and custom item templates to build tailored navigation UIs.

Examples:
Start & End Slots

Start & End Slots

Live preview is not available for this example yet.

Code
Custom Item Template

Custom Item Template

Live preview is not available for this example yet.

Code

Router Integration

Router links, query params, fragments and active-state matching through routerLinkActive options.

Examples:
Router Integration & Active States

Router Integration & Active States

Live preview is not available for this example yet.

Code

Events

Observe interaction events for links, dropdowns, mobile toggles and panel navigation.

Examples:
Events API

Events API

Live preview is not available for this example yet.

Code

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

Live preview is not available for this example yet.

Code
Per-item expandMode Override

Per-item expandMode Override

Live preview is not available for this example yet.

Code
Right Sidebar Panel Mode

Right Sidebar Panel Mode

Live preview is not available for this example yet.

Code

Key features

Horizontal and vertical nav

Handle top bars, sidebars and mixed navigation surfaces with one Angular library.

Nested and drill-down menus

Useful for admin products and documentation experiences where information depth grows quickly.

Responsive application shells

Adapt navigation behavior across desktop sidebars and mobile collapse states.

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.

Related libraries

ng-hub-ui-breadcrumbs ng-hub-ui-portal ng-hub-ui-stepper