Angular ナビゲーションメニューコンポーネント | ng-hub-ui-nav

ドロップダウン、ドリルダウンパネル、レスポンシブな折りたたみ、Router 連携、CSS 変数テーマを備えた Angular ナビゲーションコンポーネント。

最終更新 2026/08/19

概要

チームがこのライブラリを探す理由

Router を認識し、再利用可能な UX パターンを備えた水平・垂直・ドリルダウンのメニューが必要なとき、この Angular ナビゲーションコンポーネントを使ってください。

インストール

npm install ng-hub-ui-nav

ジャンプ

最適な用途

  • アプリシェル
  • 管理ダッシュボード
  • ドキュメントメニュー
  • レスポンシブナビゲーション

について nav

ng-hub-ui-nav は、Angular アプリケーションがシンプルな上部メニューでは足りなくなったときに役立ちます。ドキュメントサイト、ダッシュボード、エンタープライズシェルに現れる垂直サイドバー、ドロップダウンツリー、入れ子のナビゲーション、レスポンシブな折りたたみパターンに対応します。

機能ガイド

コアナビゲーション

データ駆動の項目レンダリング、アイコン、バッジ、無効状態を備えた、基本的な横方向・縦方向のナビゲーションです。

サンプル:
基本的な水平ナビゲーション

基本的な水平ナビゲーション

垂直アコーディオンナビゲーション

垂直アコーディオンナビゲーション

垂直フライアウトナビゲーション

垂直フライアウトナビゲーション

ドロップダウンのネスト

click、hover、またはそれらを組み合わせたトリガーモードを備えた、無制限の多階層ドロップダウンメニューです。セパレーターとヘッダー項目を含みます。

サンプル:
ネストされた多階層ドロップダウン

ネストされた多階層ドロップダウン

ヘッダー & 区切り線

ヘッダー & 区切り線

ドロップダウントリガー

ドロップダウントリガー

状態

無効化されたルート項目とネストされた項目、およびそれらのインタラクション動作を示します。

サンプル:
無効状態

無効状態

省略ラベルとツールチップ

省略ラベルとツールチップ

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

レスポンシブな動作

レスポンシブな折りたたみ、モバイルレンダリング、RTL スロットの動作です。

サンプル:
レスポンシブな折りたたみモード

レスポンシブな折りたたみモード

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 と開始/終了スロット

RTL と開始/終了スロット

デスクトップアイコンレール

縦型ナビをアイコンのみのレールに折りたたみ、各セクションをワンクリックで維持します。ラベルはツールチップとして表示され、グループはオーバーレイのフライアウトで開き、トグルと永続化は双方向の 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.

スロット&テンプレート

カスタマイズされたナビゲーション UI を構築するための、start/end スロットの投影とカスタム項目テンプレートです。

サンプル:
開始 & 終了スロット

開始 & 終了スロット

カスタムアイテムテンプレート

カスタムアイテムテンプレート

Router 統合

routerLinkActive オプションを介した、router リンク、クエリパラメータ、フラグメント、アクティブ状態のマッチングです。

サンプル:
ルーター統合 & アクティブ状態

ルーター統合 & アクティブ状態

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.

イベント

リンク、ドロップダウン、モバイルトグル、パネルナビゲーションのインタラクションイベントを監視します。

サンプル:
イベント API

イベント API

Last event:

{
  "name": "none",
  "payload": null
}

パネルのドリルダウン

ドロップダウンをクリックすると子項目がサイドパネルに開く、スタック式のパネルナビゲーションです。設定可能な最大パネル数、戻るナビゲーション付きのドリルダウン、左右のサイドバー配置をサポートします。

サンプル:
パネルのドリルダウンナビゲーション

パネルのドリルダウンナビゲーション

アイテムごとの expandMode 上書き

アイテムごとの expandMode 上書き

右サイドバーパネルモード

右サイドバーパネルモード

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

主な機能

最近の変更

Version 22.10.0 - 8/16/26, 12:00 AM

fixed: The scroll spy could never reach the last sections of a page: its observation band stops partway down the viewport, so once the container has nothing left to scroll, everything below that line was unreachable — clicking the final entry of a seven-example page settled the mark four items above it. The last section now wins outright at the end of the container. Selection also went by intersectionRatio, which measures how much of a section fits the band rather than which comes first, so a short block beat the tall one the reader was in the middle of; the topmost section wins now.

added: config.followReplacedUrls sets how eagerly the nav follows a scroll spy, which names the section under the reader by replacing the URL: true follows each report (the previous behaviour and the default), a number of milliseconds follows only once the reports go quiet so a scroll lands the mark once, and false never follows. On a thirty-item panel that turns twenty highlight changes in six seconds of reading into one. Alongside it, the active mark can travel between items instead of appearing and disappearing in place (config.activeIndicator, off by default). One element per list, parked over whichever sibling is active and moved with a transform, so the animation never touches the layout; duration and easing come from the new --hub-nav-item-active-indicator-transition. Opt-in because the mark is normally painted by each item, so turning it on moves the same pixels to a node the list owns. Travelling says you chose to go here, and most moves are not that: the mark travels for a pushed navigation and arrives for a replaced one, which is how a scroll spy reports position — otherwise it flies up and down a long panel while the reader is only reading. A relayout is treated the same way. Travel only means something between siblings: crossing into a submenu, a drill-down panel or a collapsed rail swaps one list for another, so each list owns its mark and it fades in there. Geometry is measured and re-measured through a ResizeObserver, since the rail, the accordion and the viewport all resize items without the list hearing about it. Honours prefers-reduced-motion.

Version 22.9.1 - 8/16/26, 12:00 AM

fixed: An item stopped being marked active when the application serialized URLs with a trailing slash. /products and /products/ are the same place, and a canonical trailing-slash UrlSerializer is an ordinary SEO choice, but route matching compared the two as raw strings — so every item declared without the slash silently stopped matching, and only its ancestors stayed lit because their prefix test tolerates one. Worst on items differing from their siblings only by fragment: none ever matched, so a scroll-spy panel appeared dead. Paths are now compared normalized, root excluded.

Version 22.9.0 - 8/15/26, 12:00 AM

added: Desktop icon rail: the new two-way rail input collapses a vertical nav to --hub-nav-rail-width showing icons only. A built-in edge toggle (config.railToggle, default true, fully themeable through the --hub-nav-rail-toggle-* tokens including a replaceable SVG arrow) flips the state; labels surface as tooltips, accordion groups open as click-triggered overlay flyouts, and below collapseBreakpoint the offcanvas behavior always wins. The library persists nothing — railChange lets the host store the preference.

added: Localizable built-in labels: the previously hardcoded ARIA strings (Toggle navigation, Close navigation, Go back, Close panel, Toggle {label}) now resolve from HUBUI.NAV.* keys via the shared translation adapter, with per-instance overrides through config.labels.

Version 22.8.4 - 8/13/26, 12:00 AM

fixed: Route-aware panel sidebars now choose the most specific active root item when opening panels. A localized Home route such as /en/ no longer wins over /en/forms/overview/, so deep links keep the active library secondary panel open instead of leaving only its root entry highlighted.

Version 22.8.3 - 8/8/26, 12:00 AM

fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.

Version 22.8.2 - 8/7/26, 12:00 AM

fixed: A section no longer blinks when you click inside it. Clicking an entry closed every dropdown — right for a flyout, which is transient and dismissed by the click — but an accordion opened from the route states where you are, so closing it and letting the route reopen it a tick later made the section shut and open again on every navigation. The click now leaves the dropdown state alone when the route owns it (autoOpenFromRoute on an accordion) and still dismisses a flyout.

Version 22.8.1 - 8/7/26, 12:00 AM

fixed: An accordion opens the section you navigated into. Opening from the route was decided by whether the rail was collapsed and nothing else, so a vertical accordion arrived at /products with its section shut, while the panel it opened instead sat behind the page, invisible to the eye and the pointer. The expanded rail now consults the effective expand mode of the section holding the active route, so an accordion syncs its dropdowns and only a flyout or panel rail opens panels.

fixed: Two entries no longer claim to be where you are. Marking a section on everything below it also marked an entry whose route prefixes a sibling's: at /products/categories, both "Products" (/products) and "Categories" lit up. The longest matching route among siblings wins now, so the catalogue is marked there and the list is still marked at /products/42/edit. An exact match is never overridden, and a dropdown that matched through a child keeps its mark.

Version 22.8.0 - 8/6/26, 12:00 AM

fixed: The rail keeps its mark on a detail page. An item was active only on its exact route, so opening a record — /customers/42/edit from /customers — cleared the mark. An item is now active on its own route and on anything below it, matched by whole segments (/products is not marked by /products-archive), with the query string ignored. A root item (/) still matches only itself, and routerLinkActiveOptions: { exact: true } — declared but never read until now — opts an item back into strict matching. Dropdowns follow their children.

Version 22.7.2 - 7/27/26, 12:00 AM

fixed: aria-orientation on the menu tree: the root menubar now announces vertical when the nav renders as a sidebar (WAI-ARIA defaults menubar to horizontal), and submenu/dropdown menus declare vertical explicitly. Keyboard behavior was already orientation-aware — only the attribute was missing.

Version 22.7.1 - 7/26/26, 12:00 AM

fixed: Declared the real ng-hub-ui-utils peer range (>=22.7.0); the previous >=1.0.0 floor resolved to a utils major without resolveHubAccent.

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.