Angular ナビゲーションメニューコンポーネント | ng-hub-ui-nav
ドロップダウン、ドリルダウンパネル、レスポンシブな折りたたみ、Router 連携、CSS 変数テーマを備えた Angular ナビゲーションコンポーネント。
概要
チームがこのライブラリを探す理由
Router を認識し、再利用可能な UX パターンを備えた水平・垂直・ドリルダウンのメニューが必要なとき、この Angular ナビゲーションコンポーネントを使ってください。
インストール
npm install ng-hub-ui-navジャンプ
最適な用途
- アプリシェル
- 管理ダッシュボード
- ドキュメントメニュー
- レスポンシブナビゲーション
について nav
ng-hub-ui-nav は、Angular アプリケーションがシンプルな上部メニューでは足りなくなったときに役立ちます。ドキュメントサイト、ダッシュボード、エンタープライズシェルに現れる垂直サイドバー、ドロップダウンツリー、入れ子のナビゲーション、レスポンシブな折りたたみパターンに対応します。
機能ガイド
コアナビゲーション
データ駆動の項目レンダリング、アイコン、バッジ、無効状態を備えた、基本的な横方向・縦方向のナビゲーションです。
サンプル:
基本的な水平ナビゲーション
基本的な水平ナビゲーション
垂直アコーディオンナビゲーション
垂直アコーディオンナビゲーション
垂直フライアウトナビゲーション
垂直フライアウトナビゲーション
ドロップダウンのネスト
click、hover、またはそれらを組み合わせたトリガーモードを備えた、無制限の多階層ドロップダウンメニューです。セパレーターとヘッダー項目を含みます。
サンプル:
ネストされた多階層ドロップダウン
ネストされた多階層ドロップダウン
ヘッダー & 区切り線
ヘッダー & 区切り線
ドロップダウントリガー
ドロップダウントリガー
状態
無効化されたルート項目とネストされた項目、およびそれらのインタラクション動作を示します。
サンプル:
無効状態
無効状態
レスポンシブな動作
レスポンシブな折りたたみ、モバイルレンダリング、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 と開始/終了スロット
スロット＆テンプレート
カスタマイズされたナビゲーション 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.
イベント
リンク、ドロップダウン、モバイルトグル、パネルナビゲーションのインタラクションイベントを監視します。
サンプル:
イベント 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 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.