API リファレンス

nav の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

インプット

40 個のインプットで 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 ディレクティブはこの入力より優先されます。
`iconTemplate`	`TemplateRef<HubNavItemIconContext> \| null`	`null`	icon を宣言した項目で、アイコンクラスの代わりに描画されるテンプレート。$implicit（項目）と rail を持つ HubNavItemIconContext を受け取ります。hubNavItemIcon ディレクティブがこの入力より優先されます。
`autoOpenFromRoute`	`boolean`	`false`	true の場合、初期化時とナビゲーションのたびに、アクティブな router URL に一致するドロップダウンとドリルダウンパネルを nav が自動的に開きます。URL が開閉状態を決めるサイドバーナビゲーションで便利です。ルートごとに展開方法が異なるメニューでは、開いたままになるセクションは 1 つだけです。アコーディオンのルートに移動すると、離れたパネルルートのパネルが閉じ、その逆も同様です。
`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)] で双方向バインド可能です。
`activeItemId`	`string \| null (two-way: model)`	`null`	読者の現在地を決めるのがルーターでないときに、アクティブと印をつける項目です。`id` か `fragment` で指定します。値がある間はメニュー全体をこれが引き受け、ルート照合は退き、印のついた項目は `page` ではなく `aria-current="location"` を伝えます。双方向バインド可能で、スクロールスパイはこれを通して印を動かします。
`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 セレクタ。
`nav (hubNavScrollSpy)`	`HubNavComponent \| null`	`null`	このスパイが受け持つメニューです。結びつけると両半分がつながり、読者の前にあるセクションが対応する項目に印をつけ、項目をクリックするとここへスクロールします。URL は書き換えず、履歴も積みません。結びつけない場合、スパイは `activeSectionChange` で報告するだけです。
`scrollContainer (hubNavScrollSpy)`	`HTMLElement \| null`	`null`	これらのセクションが実際にスクロールする要素です。スパイが上へたどって見つける要素と違う場合に指定します。`scrollTo` が動かすのもこれで、そのおかげでジャンプがスクロール可能な祖先をまとめて引きずることがなくなります。
`clickSettleMs (hubNavScrollSpy)`	`number`	`0`	クリックの答えが、読者が操作を引き取ったように見えても生き延びる時間（ミリ秒）です。この間はホイール・タッチ・キーを無視するので、まだ動いている最中のジャンプがアニメーションの途中で覆されません。既定の `0` は従来の挙動のままです。
`sectionId (hubNavScrollSpySection)`	`string \| null`	`null`	追跡対象セクションの省略可能なセクション id。省略時はホスト要素の id 属性が使用されます。
`item (hub-nav-item)`必須	`HubNavItem`	—	内部の hub-nav-item 子コンポーネントがレンダリングするナビゲーション項目。hub-nav によって自動的に管理されるため、直接バインドすることはほとんどありません。
`depth / isActive / isExpanded / forceAccordionMode (hub-nav-item; depth and forceAccordionMode also on hub-nav-item-list)`	`number / boolean / boolean / boolean`	`0 / false / false / false`	hub-nav-item の内部状態インプット：ネストの深さ、active／expanded フラグ、およびモバイルやパネルコンテキスト内での強制的な accordion 動作。hub-nav-item-list にも depth と forceAccordionMode があり、階層をまとめて強制できます。
`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 / isLast (hub-nav-item-list / hub-nav-panel / hub-nav-panel-container)`	`TemplateRef<unknown> \| null / HubNavDropdownRenderMode / string / HubNavSidebarSide / boolean / boolean / boolean`	—	ルートの hub-nav が子コンポーネントへ転送する内部配線用のインプット。それぞれは必要とするコンポーネントのサブセットにのみ存在し、isLast はスタック最外側のパネルを示して、その端を閉じさせます。直接バインドせず、hub-nav の config インプットを通じて設定してください。
`overlayOwnerClass / overlayOrientationClass (hub-nav-item-list / hub-nav-panel / hub-nav-panel-container)`	`string / 'hub-nav--horizontal' \| 'hub-nav--vertical'`	`'' / 'hub-nav--vertical' ('hub-nav--horizontal' on hub-nav-item-list)`	サブメニューを body 直下のオーバーレイに描画するときにルートの hub-nav が転送するオーバーレイ用の配線です。overlayOwnerClass は外側クリック処理のためにオーバーレイを元のナビへ結びつける一意のクラス、overlayOrientationClass はナビの向きを運び、コンポーネントツリーの外でもホストコンテキストのスタイルが効くようにします。

アウトプット

nav の動作に反応 — ロジックを接続できる 12 個のイベント。

名前	型	説明
`itemClick`	`OutputEmitterRef<HubNavItem>`	link 項目がクリックされたときに発行されます。クリックされた HubNavItem を提供します。
`dropdownOpen`	`OutputEmitterRef<HubNavItem>`	ドロップダウン項目が開かれたときに発行されます。
`dropdownClose`	`OutputEmitterRef<HubNavItem>`	ドロップダウン項目が閉じられたときに発行されます。
`mobileToggle`	`OutputEmitterRef<boolean>`	モバイルパネルがトグルされたときに発行されます。開いているときは true、閉じているときは false を提供します。
`panelChange`	`OutputEmitterRef<HubNavPanelEvent>`	パネルが開かれた、閉じられた、ドリルダウンされた、または戻る操作が行われたときに発行されます。項目、パネルのインデックス、アクションタイプを提供します。
`railChange`	`OutputEmitterRef<boolean>`	rail モデル値が切り替わったときに発行され、[(rail)] の双方向バインディングとアプリ側の永続化を可能にします。
`activeItemIdChange`	`OutputEmitterRef<string \| null>`	印のついた項目が変わったときに発行されます。`activeItemId` が双方向バインド可能なのはこれがあるからです。`[nav]` で結びつけたスクロールスパイは、たどり着いたセクションをこの出力で伝えます。
`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 に中継します。

テンプレート

自分好みに — 4 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。

名前	説明	サンプル
`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) { <hub-badge shape="rounded">{{ item.badge }}</hub-badge> } </ng-template> </hub-nav>`
`hubNavItemIcon`	icon を宣言した項目のグリフだけを差し替えます。$implicit（項目）と rail を持つ HubNavItemIconContext を受け取るため、ライブラリがどのアイコンパッケージにも依存せずに、ng-hub-ui-icons でも他のパックでもアイコンを描画できます。icon のない項目はそのままです。	`<hub-nav [items]="items"> <ng-template hubNavItemIcon let-item let-rail="rail"> <hub-icon [name]="item.icon" [size]="rail ? 'lg' : 'md'" /> </ng-template> </hub-nav>`