AX - ナビゲーション

概要

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

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

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

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

Avonni Navigation コンポーネントはより高い柔軟性を念頭に設計されています。標準の Salesforce ナビゲーションとは異なり、より複雑なメニュー構造を可能にします。複数レベルのメニューを作成でき、これらを層やステップとして考えることができます。たとえば、メイン項目（レベル1）、その下のサブ項目（レベル2）、さらにその下のサブサブ項目（レベル3）を持つことができます。この階層化アプローチにより、大量の情報を構造化して見やすく提示することが容易になります。

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

プロパティ

🎚️ 一般設定

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

🗄️ データソースの設定

🎨 スタイリング

メニューの外観

その メニューバリアント Salesforce Experience Cloud 向け Avonni Navigation コンポーネント内の設定は、メニューの全体的なスタイルと挙動を決定します。

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

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

ベース

その base バリアントはナビゲーションメニューの標準スタイルを表します。通常、水平配置では項目が行に、垂直配置では列に一覧表示されるシンプルなスタイルです。このバリアントはクリーンでミニマルなため、クラシックな外観が望ましいほとんどのサイトに適しています。

ドロワー

その drawer このバリアントは引き出しのようにサイドからスライドして入るメニューを意味します。このスタイルは特にモバイルビューや画面スペースが限られる場合の垂直メニューでよく使用されます。ナビゲーションを隠しておき、必要なときにメニューアイコン（一般的には「ハンバーガー」アイコン）で表示できるようにします。

ドロワーバリアントの例

列

With the columns バリアントでは、ドロップダウンメニューが列で表示され、ドロップダウン内で多層構造のレイアウトを可能にします。これは項目やカテゴリが多く複雑なナビゲーションを整理するのに特に有用で、ユーザーがオプションを参照しやすくなります。

カラムバリアントの例

タブ

その tabs バリアントは最上位のメニュー項目をタブ式ナビゲーションに変換します。このスタイルは、サイトの異なるセクションを区別し、ナビゲーションバーから直接アクセスできるようにしたい場合に多く使われます。バインダーやウェブブラウザのタブに似た馴染みのあるインターフェースを提供します。

これらの各バリアントはサイトのナビゲーション体験を定義するのに役立つため、サイトのデザイン原則に沿い、ユーザーの導線を向上させるものを選ぶことが重要です。

タブバリアントの例