ナビゲーション

概要

Avonni Navigation コンポーネントは、Salesforce Experience Cloud サイト向けのカスタマイズ可能なナビゲーションバーです。ナビゲーションリンクを整理し、セクションやページへのクイックアクセスを提供することでサイトの使いやすさを向上させます。豊富な設定により、ほとんどのサイトのデザインやナビゲーション構造に合わせて調整できます。

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

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

プロパティ

名前
説明

向き

従来の上部ナビゲーションバーには「horizontal」を、サイドバー風のナビゲーションには「vertical」を選択してください。

サイトロゴを表示

ナビゲーションコンポーネント内にサイトロゴを表示するかどうかを切り替えます。

上部固定

ページをスクロールしてもナビゲーションバーをビューポートの上部に固定するよう有効にします。

モバイルメニューを有効にする

小さい画面でのナビゲーションを向上させるために、モバイル最適化されたメニューを有効にします。

ホバーでメニューを開く

ドロップダウンメニューがクリックを必要とせず、ユーザーがメニュー項目にホバーしたときに開くように設定します。

陰影付き

視覚的な奥行きを出すためにナビゲーションバーに微妙な陰影効果を追加します。

ドロップダウンのヌビンを表示

ドロップダウンが開いているときにメニュー項目を指す小さな矢印状のグラフィックを表示します。

項目インジケーターを表示

メニュー項目の下にさらにコンテンツがあることを示す視覚的なインジケーターを表示するよう切り替えます。

メニューの外観

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

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

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

ベース

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

ドロワー

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

ドロワーバリアントの例

カラム

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

カラムバリアントの例

タブ

その タブ variant converts the top-level menu items into tabbed navigation. This style is often used when different sections of a site need to be demarcated and accessible directly from the navigation bar. It provides a familiar interface for users, similar to tabs in a binder or a web browser.

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

タブバリアントの例

最終更新

役に立ちましたか?