アプリケーションの最上位のHeaderです。アプリケーション本体のタイトル（またはロゴ）を表示し、ブランドを印象を表現します。また、アプリケーションの主要アクションを行えるようにします。Header同様、Leading, Body, Trailingの3つの領域で構成されます。

さらに、ナビゲーションを行うこともできます。Headerが逆方向の遷移のみ行えるのに対し、App BarはLeadingに配置されたMenuアイコンのButtonのクリックイベントでNavigation系のコンポーネント（Side NavigationまたはNavigation Drawer）を開閉し、横方向のビュー（ページ）遷移を行えます。

また、Trailingに直接Navigationを配置することもできます。

このコンポーネントはWebアプリケーションの場合のみ使用できます。ネイティブアプリケーションではインタラクションの一貫性や実装コストに優れたプラットフォーム標準のコンポーネント（iOSではToolbars、AndroidではApp bars）を使用してください。

Dictionary

ALeading

MenuアイコンのButtonのクリックイベントでNavigation系のコンポーネント（Side NavigationまたはNavigation Drawer）を開閉し、横方向のビュー遷移を行うことができます。Bottom Navigationで代わりが効く場合は、必ず設置する必要はありません。

BBody

アプリケーションの名前やロゴを左寄せで配置できます。

Titleを常に表示してホームビュー（ホームスクリーン、トップページ）へのアクセスを容易にします。モバイルサイズかつ、Bottom Navigationでホームビューにアクセスできる場合は、常にロゴが表示されている必要はありません。その場合はロゴ以外の要素（色やアイコン）でブランドを表すべきです。

CTrailing

Headerとの違いはタスクの完了に必ずしも必要ではないサブアクションを促すButtonではなく、アプリケーションの主要アクションを促すButtonを配置できることです。

一般的なアクションはIconのみのButtonを配置することができます。一般的ではないアクションを配置する場合は、Iconだけではアクションの内容が伝わらない可能性が高いので、テキストが入ったButtonを検討します。または、表示領域との兼ね合いを考えてデスクトップのときとモバイルのときでテキストが入ったボタンとIconのみのボタンを切り替えることも検討します。

アクションが多く、モバイル表示などでアクションボタンがおさまりきらない場合、Ellipsis VarticalもしくはEllipsis Horizontalのアイコンを用いて優先順位の低いアクションを格納することができます。また、AppBarではAvatarのButtonのクリックイベントでログインユーザーに関する項目を格納することもできます。

格納したアクションはドロップダウンメニューで表示します。

また、Actionには検索クエリを入力して検索結果を表示できるTextfieldを配置できます。Textfieldはビュー内における検索アクションの優先順位が高い場合はデフォルトで表示しますが、優先順位が低い場合はMagnifying GlassのIconのクリックイベントで展開します。

Headerと違う点としては、TrailingにNavigationを配置して横方向のビュー遷移を行うことができます。情報の閲覧（ペパボデザインスキームにおけるコミュニケーション、コンテンツの文脈。参考コンテンツ：具体的にデザインする対象は何か）が大きな比重を占めるウェブサイトでのナビゲーション設計に有用です。

モバイルデバイスなどでviewportの幅に対してApp Barの内包要素が収まりきらない場合は、Leadingに配置したMenuアイコンButtonのクリックイベントでNavigation系のコンポーネント（Side NavigationやNavigation Drawer）を開閉し、横方向のビュー遷移を行うことができます。

Interaction

全体

スクロール

ランディングページなどで背景にヒーローイメージがある場合はスクロールイベントに応じてAppearanceをTransparentからWhiteもしくはFilledに変化させることができます。

Leading

Navigation系コンポーネントの開閉

MenuのIconのみのButtonのクリックイベントでSide NavigationまたはNavigation Drawerを開閉します。

Body

ホーム画面への遷移

クリックイベントでホームビューへ遷移できます。

Trailing

Menuを開閉する

Ellipsis VerticalまたはEllipsis HorizontalのIconのみのButton、または、AvatarのButtonのクリックイベントでドロップダウンメニューを開閉します。

検索

Textfieldに検索クエリを入力してSubmitすることで検索を行います。

任意のアクション

その他、Buttonのコンテキストに応じた任意のアクションを行うことができます。

Assets