Angular Navigation Menu Component | ng-hub-ui-nav

Angular navigation component with dropdowns, drill-down panels, responsive collapse, router integration and CSS-variable theming.

Interactive examples

Explore live examples that show how the library behaves in common Angular use cases.

Core Navigation

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

Basic Horizontal Navigation

Vertical Accordion Navigation

Vertical Flyout Navigation

Dropdown Nesting

Unlimited multi-level dropdown menus with click, hover, or combined trigger modes. Includes separator and header items.

Nested Multi-Level Dropdowns

Headers & Separators

Dropdown Triggers

States

Demonstrates disabled root and nested items and their interaction behavior.

Disabled States

Truncated Labels & Tooltip

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

Responsive Behavior

Responsive collapsing, mobile rendering, and RTL slot behavior.

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

Desktop Icon Rail

Collapse the vertical nav to an icon-only rail that keeps every section one click away: labels surface as tooltips, groups open as overlay flyouts, and the app owns the toggle and persistence through the two-way rail binding.

Collapsed Icon Rail

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 projection and custom item templates to build tailored navigation UIs.

Start & End Slots

Custom Item Template

Router Integration

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

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.

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

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

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.

Panel Drill-Down Navigation

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

Per-item expandMode Override

Right Sidebar Panel Mode

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

Vertical Sticky Sidebar

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.