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

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

インタラクティブなサンプル

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

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

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

Last event:

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

パネルのドリルダウン

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

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

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

アイテムごとの expandMode 上書き

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

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

垂直スティッキーサイドバー

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.