Angular ナビゲーションメニューコンポーネント | ng-hub-ui-nav
ドロップダウン、ドリルダウンパネル、レスポンシブな折りたたみ、Router 連携、CSS 変数テーマを備えた Angular ナビゲーションコンポーネント。
API リファレンス
nav の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。
インプット
34 個のインプットで nav を調整。通常の Angular @Input と同じようにバインドできます。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
items必須 | HubNavItem[] | — | レンダリングするナビゲーション項目の配列。各項目はその type（link、dropdown、header、separator、custom）、label、route、icon、badge、children などを定義します。 |
config | Partial<HubNavConfig> | {} | グローバルなデフォルトとマージされる部分的な設定の上書き。向き、ドロップダウンのトリガー、折りたたみモード、ブレークポイント、位置などを制御します。 |
navClass | string | '' | nav コンテナ要素に適用される追加の CSS クラス。 |
itemTemplate | TemplateRef<unknown> | null | null | 入力バインディングによって nav 項目をレンダリングするための任意のカスタムテンプレート。hubNavItemTemplate ディレクティブはこの入力より優先されます。 |
autoOpenFromRoute | boolean | false | true の場合、初期化時とナビゲーションのたびに、アクティブな router URL に一致するドロップダウンとドリルダウンパネルを nav が自動的に開きます。URL が開閉状態を決めるサイドバーナビゲーションで便利です。 |
color | 'primary' | 'success' | 'danger' | 'warning' | 'info' | string | undefined | ホバー／アクティブのアフォーダンスに適用されるセマンティックアクセント。セマンティック名（primary、success、danger、warning、info）、登録済みのアクセント名、CSS の名前付きカラー、またはリテラルの #hex / rgb() / oklch() / var() を受け付けます。裸のワードは --hub-sys-color-<name> トークンに解決され、省略時のデフォルトは primary です。 |
rail | boolean (two-way: model) | false | デスクトップ専用のアイコンレール。true の場合、縦型ナビはレール幅でアイコンのみを表示します。collapseBreakpoint 未満では無視され、常にオフキャンバス動作が優先されます。[(rail)] で双方向バインド可能です。 |
orientation (config) | 'horizontal' | 'vertical' | 'horizontal' | ナビゲーションの向き：horizontal はトップバーを、vertical はサイドバーをレンダリングします。 |
verticalExpandMode (config) | 'accordion' | 'flyout' | 'panel' | 'accordion' | 縦向きのときに子項目を展開する方法：accordion はインラインで展開し、flyout は位置指定されたサイドサブメニューを開き、panel はスタック式のドリルダウンパネルを開きます。 |
dropdownTrigger (config) | 'hover' | 'click' | 'both' | 'click' | ドロップダウンメニューを開く仕組み：hover、click、またはその両方。 |
dropdownRenderMode (config) | 'inline' | 'overlay' | 'inline' | ドロップダウンおよび flyout メニューのレンダリング戦略：inline は nav の DOM 内に、overlay はクリッピングを避けるために body レベルのレイヤーにレンダリングします。panel ドリルダウンモードには影響しません。 |
position (config) | 'static' | 'sticky' | 'fixed' | 'static' | nav コンテナの CSS ポジショニング戦略。sticky の配置は縦方向のナビゲーションでのみ有効になります。 |
stickyTop (config) | string | '0px' | sticky 配置が有効なときに使用される上端オフセット。任意の有効な CSS の長さ値を受け付けます。 |
collapseMode (config) | 'offcanvas' | 'dropdown' | 'fullscreen' | 'offcanvas' | 小さいビューポートでメニューが折りたたまれたときの表示モード：offcanvas はスライドインするドロワー、dropdown はトグラーの下のドロップダウン、fullscreen は全画面オーバーレイです。 |
collapseBreakpoint (config) | number | 992 | メニューが折りたたまれるビューポート幅（ピクセル単位）。0 を設定するとレスポンシブな折りたたみが無効になります。 |
offcanvasPosition (config) | 'start' | 'end' | 'top' | 'bottom' | 'start' | offcanvas パネルがスライドインしてくる側。collapseMode が offcanvas の場合にのみ適用されます。 |
ariaLabel (config) | string | 'Navigation' | nav 要素に適用されるアクセシブルなラベル。 |
panelMaxVisible (config) | number | 3 | panel 展開モードで同時に表示できるパネルの最大数。これを超えると、最後のパネルが戻るナビゲーション付きでその場でドリルダウンします。 |
sidebarSide (config) | 'left' | 'right' | 'left' | サイドバーの物理的な側：left（パネルは右へ広がる）または right（パネルは左へ広がる）。 |
panelWidth (config) | string | '16rem' | 各ドリルダウンパネルの幅。任意の有効な CSS の幅の値を受け付けます。 |
railToggle (config) | boolean | true | 縦型デスクトップナビの主要カラムに組み込みのエッジトグルを表示するかどうか。アプリ独自のトグルを用意する場合は無効にします。--hub-nav-rail-toggle-* トークンで完全にテーマ設定でき、SVG 矢印も差し替え可能です。 |
followReplacedUrls (config) | boolean | number | true | URL を置き換えて読者の位置を知らせるスクロールスパイに、ナビがどれだけ追従するか。true は各通知に追従、ミリ秒数は通知が止まってから追従、false は追従しません。 |
activeIndicator (config) | boolean | false | アクティブ表示がその場で現れ消えるのではなく、項目間を移動するかどうか。既定はオフで、prefers-reduced-motion を尊重します。 |
labels (config) | Partial<HubNavLabels> | undefined | 組み込みのアクセシブルラベルのインスタンス単位の上書き。省略したラベルは共有の HUBUI.NAV.* キー、次に英語の既定値から解決されます。 |
enabled (hubNavScrollSpy) — bound as [hubNavScrollSpy] | boolean | true | セクション追跡を有効または無効にします。セレクタ自体を通じてバインドします：[hubNavScrollSpy]="false" でスパイをオフにできます。 |
offset (hubNavScrollSpy) | number | 120 | アクティブなセクションを計算する際に sticky ヘッダーを補正するための上端オフセット（ピクセル単位）。 |
sectionSelector (hubNavScrollSpy) | string | '[data-hub-nav-scroll-spy-section]' | ホストコンテナ内で追跡可能なセクション要素を見つけるために使用される CSS セレクタ。 |
sectionId (hubNavScrollSpySection) — bound as [hubNavScrollSpySection] | string | null | null | 追跡対象セクションの省略可能なセクション id。省略時はホスト要素の id 属性が使用されます。 |
item (hub-nav-item)必須 | HubNavItem | — | 内部の hub-nav-item 子コンポーネントがレンダリングするナビゲーション項目。hub-nav によって自動的に管理されるため、直接バインドすることはほとんどありません。 |
depth / isActive / isExpanded / forceAccordionMode (hub-nav-item) | number / boolean / boolean / boolean | 0 / false / false / false | hub-nav-item の内部状態インプット：ネストの深さ、active／expanded フラグ、およびモバイルやパネルコンテキスト内での強制的な accordion 動作。 |
items (hub-nav-item-list)必須 | HubNavItem[] | — | 内部の hub-nav-item-list 子コンポーネントがレンダリングする項目。hub-nav によって自動的に管理されます。 |
panels (hub-nav-panel-container)必須 | HubNavPanelState[] | — | panel 展開モードで内部の hub-nav-panel-container がレンダリングする、開いているパネル状態のスタック。 |
panel (hub-nav-panel)必須 | HubNavPanelState | — | 内部の hub-nav-panel 子コンポーネントがレンダリングする、単一のドリルダウンパネルの状態。 |
itemTemplate / dropdownRenderMode / panelWidth / sidebarSide / showHeader / hideFirstPanelHeader (hub-nav-item-list / hub-nav-panel / hub-nav-panel-container) | TemplateRef<unknown> | null / HubNavDropdownRenderMode / string / HubNavSidebarSide / boolean / boolean | — | ルートの hub-nav が子コンポーネントへ転送する内部配線用のインプット（それぞれは必要とするコンポーネントのサブセットにのみ存在し、深さおよびオーバーレイの所有者／向きクラスとともに渡されます）。直接バインドせず、hub-nav の config インプットを通じて設定してください。 |
アウトプット
nav の動作に反応 — ロジックを接続できる 11 個のイベント。
| 名前 | 型 | 説明 |
|---|---|---|
itemClick | OutputEmitterRef<HubNavItem> | link 項目がクリックされたときに発行されます。クリックされた HubNavItem を提供します。 |
dropdownOpen | OutputEmitterRef<HubNavItem> | ドロップダウン項目が開かれたときに発行されます。 |
dropdownClose | OutputEmitterRef<HubNavItem> | ドロップダウン項目が閉じられたときに発行されます。 |
mobileToggle | OutputEmitterRef<boolean> | モバイルパネルがトグルされたときに発行されます。開いているときは true、閉じているときは false を提供します。 |
panelChange | OutputEmitterRef<HubNavPanelEvent> | パネルが開かれた、閉じられた、ドリルダウンされた、または戻る操作が行われたときに発行されます。項目、パネルのインデックス、アクションタイプを提供します。 |
railChange | OutputEmitterRef<boolean> | rail モデル値が切り替わったときに発行され、[(rail)] の双方向バインディングとアプリ側の永続化を可能にします。 |
activeSectionChange (hubNavScrollSpy) | OutputEmitterRef<string> | 表示中のセクションが変わるたびに、新たにアクティブになったセクションの id を発行します。 |
clicked / toggleDropdown (hub-nav-item) | OutputEmitterRef<{ item: HubNavItem; event: Event }> / OutputEmitterRef<HubNavItem> | 内部の hub-nav-item イベント：clicked は項目と元の DOM イベントを、toggleDropdown はトグルされるドロップダウン項目を発行します。どちらも hub-nav のアウトプットへバブルアップします。 |
itemClick / dropdownToggle / panelOpen (hub-nav-item-list / hub-nav-panel / hub-nav-panel-container) | OutputEmitterRef<{ item: HubNavItem; event: Event }> / OutputEmitterRef<HubNavItem> / OutputEmitterRef<HubNavItem> | 内部のリストおよびパネル子コンポーネントが hub-nav へバブルアップさせながら再発行する項目インタラクションイベント：itemClick（項目と DOM イベント）、dropdownToggle（トグルされた項目）、panelOpen（その子項目をパネルで開くべき項目）。 |
closePanel / backClick (hub-nav-panel) | OutputEmitterRef<string> | 閉じるボタン（closePanel）または戻るボタン（backClick）が押されたときに、内部の hub-nav-panel からパネル id とともに発行されます。 |
panelClose / panelBack (hub-nav-panel-container) | OutputEmitterRef<string> | 内部の hub-nav-panel-container からパネル id とともに発行され、閉じる要求（panelClose）と戻る要求（panelBack）を hub-nav に中継します。 |
テンプレート
自分好みに — 3 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。
| 名前 | 説明 | サンプル |
|---|---|---|
hubNavStart | start スロットにカスタムコンテンツを投影します。水平方向: 視覚的な開始位置（LTR では左、RTL では右）。垂直方向: 主要カラムの上部。 | <hub-nav [items]="items">
<ng-template hubNavStart let-collapsed="collapsed">
<img src="logo.svg" alt="Brand" />
@if (!collapsed) { <span>App Name</span> }
</ng-template>
</hub-nav> |
hubNavEnd | end スロットにカスタムコンテンツを投影します。水平方向: 視覚的な終了位置（LTR では右、RTL では左）。垂直方向: 主要カラムの下部。 | <hub-nav [items]="items">
<ng-template hubNavEnd>
<button type="button">Sign out</button>
</ng-template>
</hub-nav> |
hubNavItemTemplate | デフォルトの項目レンダリングをカスタムテンプレートで上書きします。$implicit（item）、active、expanded、depth の各プロパティを持つ HubNavItemTemplateContext を受け取ります。 | <hub-nav [items]="items">
<ng-template hubNavItemTemplate let-item let-active="active">
<span [class.fw-bold]="active">{{ item.label }}</span>
@if (item.badge) { <span class="badge">{{ item.badge }}</span> }
</ng-template>
</hub-nav> |