AX - ナビゲーション

概要

AX - ナビゲーション は、Experience Sites ページ上にリンクやメニューを備えたカスタマイズ可能なナビゲーションバーを表示する Experience Cloud コンポーネントです。

これを使用すると、標準の Experience Cloud ナビゲーションを超えたカスタムのナビゲーション構造（セカンダリメニュー、コンテキストナビゲーション、アクション固有のリンクグループなど）を作成できます。コード不要で、Experience Builder 内でメニュー項目、スタイル、ドロップダウン、リンク先を設定できます。

カスタムページナビゲーション、コンテキストメニュー、クイックアクションリンク、またはポータルで既定のサイトヘッダーを超えるナビゲーションが必要なあらゆる場所に最適です。

このコンポーネントは スロットを活用し 高度なカスタマイズを実現しており、LWR サイトに最適です。Aura サイトではこのレベルのカスタマイズはサポートされていません。

Avonni Navigation コンポーネントは、より高い柔軟性を念頭に設計されています。標準の Salesforce ナビゲーションとは異なり、より複雑なメニュー構造を実現できます。複数レベルのメニューを作成でき、これらはレイヤーや段階のようなものと考えられます。たとえば、メイン項目（レベル 1）、その下のサブ項目（レベル 2）、さらにその下のサブサブ項目（レベル 3）を作成できます。この階層的なアプローチにより、大量の情報を構造化され、アクセスしやすい形で整理して提示しやすくなります。

さらに、Avonni はより幅広いスタイル設定オプションを提供します。これにより、ナビゲーションメニューの外観をブランドスタイルに合わせて細かくカスタマイズできます。主要色やフォントのオプションだけではありません。Avonni ではさらに深いカスタマイズが可能で、視覚的に魅力的で、ブランドの自然な延長のように感じられるナビゲーション体験を作成できます。

プロパティ

🎚️ 一般設定

名前	説明
向き	従来型の上部ナビゲーションバーには「horizontal」、サイドバー形式のナビゲーションには「vertical」を選択します。
サイトロゴを表示	ナビゲーションコンポーネント内にサイトロゴを表示するには切り替えます。
上部に固定	ユーザーがページをスクロールしても、ナビゲーションバーをビューポート上部に固定するには有効にします。
モバイルメニューを有効化	小さい画面でのナビゲーションを改善するため、モバイル向けに最適化されたメニューを有効にします。
ホバーでメニューを開く	クリックを必要とせず、ユーザーがメニュー項目にカーソルを合わせたときにドロップダウンメニューが開くように設定します。
影付き	視覚的な奥行きを出すために、ナビゲーションバーに控えめな陰影効果を追加します。
ドロップダウンのナビンを表示	ドロップダウンが開いているときに、そのメニュー項目を指す小さな矢印のようなグラフィックを表示します。
項目インジケーターを表示	メニュー項目の下にさらにコンテンツがあることを示す視覚的インジケーターを表示するにはオンにします。

🗄️ データソース設定

🎨 スタイリング

メニューの外観

この メニューバリアント 設定は、Salesforce Experience Cloud 用 Avonni Navigation コンポーネント内で、メニュー全体のスタイルと動作を決定します。

データソースが手動に設定されており、メニューにサブ項目が含まれている場合は、「メニューバリアント」機能を使用できます。

以下は、メニューバリアントの一般的な意味です:

ベース

この base バリアントは、ナビゲーションメニューの標準スタイルを表します。シンプルで、メニュー項目は通常、横向きでは行、縦向きでは列で一覧表示されます。このバリアントはクリーンでミニマルなため、クラシックな見た目が求められるほとんどのサイトに適しています。

ドロワー

この drawer このバリアントは、開いた引き出しのように横からスライドして現れるメニューを意味します。このスタイルは、特にモバイル表示や画面スペースが限られている場合の縦型メニューでよく使用されます。必要になるまでナビゲーションを隠しておき、メニューアイコン（多くの場合「ハンバーガー」アイコン）からアクセスできるようにします。

ドロワーバリアントの例

列

この columns バリアントでは、ドロップダウンメニューが列で表示され、ドロップダウン内自体で複数レベルの構造化レイアウトを実現できます。これは、多くの項目やカテゴリを持つ複雑なナビゲーションを整理するのに特に便利で、ユーザーが選択肢を閲覧しやすくなります。

列バリアントの例

タブ

この tabs バリアントは、最上位レベルのメニュー項目をタブ形式のナビゲーションに変換します。このスタイルは、サイトの異なるセクションを明確に区切り、ナビゲーションバーから直接アクセスできるようにする必要がある場合によく使用されます。バインダーや Web ブラウザーのタブに似た、ユーザーにとって馴染みのあるインターフェースを提供します。

これらの各バリアントはサイトのナビゲーション体験を定義するのに役立つため、サイトの設計原則に合致し、ユーザージャーニーを向上させるものを選ぶことが重要です。

タブバリアントの例