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 コンポーネント内の設定は、メニューの全体的なスタイルと動作を決定します。

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

メニューバリアントの一般的な意味は次のとおりです。

ベース

この ベース バリアントは、ナビゲーションメニューの標準スタイルを表します。シンプルで、メニュー項目は通常、横向きでは横一列、縦向きでは縦一列に並びます。このバリアントはすっきりしたミニマルな見た目で、クラシックな外観を求める多くのサイトに適しています。

ドロワー

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

ドロワーバリアントの例

カラム

〜では カラム バリアントでは、ドロップダウンメニューが列で表示され、ドロップダウン自体の中に多層の構造化されたレイアウトを実現できます。これは、項目やカテゴリが多い複雑なナビゲーションを整理するのに特に有効で、ユーザーが選択肢を閲覧しやすくなります。

カラムバリアントの例

タブ

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

これらの各バリアントは、サイトのナビゲーション体験を形作るのに役立ちます。そのため、サイトのデザイン方針に合い、ユーザー体験を向上させるものを選ぶことが重要です。

タブバリアントの例