Home
App Bar
The app bar component implements the top app bar pattern. It provides a consistent header for screens, housing a navigation icon, a page title/headline, and optional trailing action icons.
Four size variants are available: small (64dp, single-row), center-aligned (64dp, centred headline), medium (112dp, headline below the row), and large (152dp, large headline).
Use the leading slot for a navigation icon (e.g. a hamburger or back
button), the default slot for the headline text, and the trailing slot for
action icon buttons.
Usage
The top app bar provides content and actions related to the current screen. Use the
leading slot for a navigation icon, the default slot for the headline, and the
trailing slot for action icon buttons.
<div style="width: 100%; overflow: hidden; border-radius: 0.5rem;">
<wc-app-bar>
<wc-icon-button slot="leading" variant="text">
<wc-icon name="menu"></wc-icon>
</wc-icon-button>
Page Title
<wc-icon-button slot="trailing" variant="text">
<wc-icon name="search"></wc-icon>
</wc-icon-button>
<wc-icon-button slot="trailing" variant="text">
<wc-icon name="more_vert"></wc-icon>
</wc-icon-button>
</wc-app-bar>
</div>
Variants
Small (default)
A single-row bar with the headline left-aligned. Ideal for top-level screens.
<div style="width: 100%; overflow: hidden; border-radius: 0.5rem;">
<wc-app-bar>
<wc-icon-button slot="leading" variant="text">
<wc-icon name="menu"></wc-icon>
</wc-icon-button>
Page Title
<wc-icon-button slot="trailing" variant="text">
<wc-icon name="search"></wc-icon>
</wc-icon-button>
<wc-icon-button slot="trailing" variant="text">
<wc-icon name="more_vert"></wc-icon>
</wc-icon-button>
</wc-app-bar>
</div>
Center-aligned
A single-row bar with the headline centred. Common on detail or secondary screens.
<div style="width: 100%; overflow: hidden; border-radius: 0.5rem;">
<wc-app-bar variant="center-aligned">
<wc-icon-button slot="leading" variant="text">
<wc-icon name="arrow_back"></wc-icon>
</wc-icon-button>
Details
<wc-icon-button slot="trailing" variant="text">
<wc-icon name="more_vert"></wc-icon>
</wc-icon-button>
</wc-app-bar>
</div>
Scrolled state
Add the scrolled attribute to show a shadow and apply a tonal surface color,
indicating that content has scrolled beneath the bar.
<div style="width: 100%; overflow: hidden; border-radius: 0.5rem;">
<wc-app-bar scrolled="true">
<wc-icon-button slot="leading" variant="text">
<wc-icon name="menu"></wc-icon>
</wc-icon-button>
Page Title
<wc-icon-button slot="trailing" variant="text">
<wc-icon name="search"></wc-icon>
</wc-icon-button>
</wc-app-bar>
</div>
Sizes
Medium
A two-row bar (112dp total) where the headline sits in a second row below the action row. Suitable for screens with rich context, such as article or inbox views.
<div style="width: 100%; overflow: hidden; border-radius: 0.5rem;">
<wc-app-bar variant="medium">
<wc-icon-button slot="leading" variant="text">
<wc-icon name="menu"></wc-icon>
</wc-icon-button>
Medium Headline
<wc-icon-button slot="trailing" variant="text">
<wc-icon name="search"></wc-icon>
</wc-icon-button>
<wc-icon-button slot="trailing" variant="text">
<wc-icon name="more_vert"></wc-icon>
</wc-icon-button>
</wc-app-bar>
</div>
Large
A two-row bar (152dp total) with a larger headline (headline-medium type scale). Use for primary screens where the page title deserves strong visual prominence.
<div style="width: 100%; overflow: hidden; border-radius: 0.5rem;">
<wc-app-bar variant="large">
<wc-icon-button slot="leading" variant="text">
<wc-icon name="arrow_back"></wc-icon>
</wc-icon-button>
Large Headline
<wc-icon-button slot="trailing" variant="text">
<wc-icon name="more_vert"></wc-icon>
</wc-icon-button>
</wc-app-bar>
</div>
On this page
Usage Variants Sizes