AppBar

Types

The themes include several types of AppBars which provide preconfigured layouts. Their respective React Components wrap the default AppBar and assign Props to it. So the Portal positions of the default AppBar are available within each of them.

Default

Name	Description
app-bar.default.before	Components are rendered before the AppBar.
app-bar.default	Components replace the AppBar.
app-bar.default.after	Components are rendered after the AppBar.

Back

Name	Description
app-bar.back.before	Components are rendered before the AppBar.
app-bar.back	Components replace the AppBar.
app-bar.back.after	Components are rendered after the AppBar.

Close

Name	Description
app-bar.close.before	Components are rendered before the AppBar.
app-bar.close	Components replace the AppBar.
app-bar.close.after	Components are rendered after the AppBar.

Simple

Name	Description
app-bar.simple.before	Components are rendered before the AppBar.
app-bar.simple	Components replace the AppBar.
app-bar.simple.after	Components are rendered after the AppBar.

Positions

Each AppBar provides several Portal positions that can inject custom elements.

Left

Name	Description
app-bar.left.before	Components are rendered before the left Portal position of the AppBar.
app-bar.left	Components replace the left Portal position of the AppBar.
app-bar.left.after	Components are rendered after the left Portal position of the AppBar.

Center

Name	Description
app-bar.center.before	Components are rendered before the center Portal position of the AppBar.
app-bar.center	Components replace the center Portal position of the AppBar.
app-bar.center.after	Components are rendered after the center Portal position of the AppBar.

Right

Name	Description
app-bar.right.before	Components are rendered before the right Portal position of the AppBar.
app-bar.right	Components replace the right Portal position of the AppBar.
app-bar.right.after	Components are rendered after the right Portal position of the AppBar.

Cart Button (GMD only)

Name	Description
app-bar.cart-button.before	Components are rendered before the Cart button Portal position of the AppBar.
app-bar.cart-button	Components replace the Cart button Portal position of the AppBar.
app-bar.cart-button.after	Components are rendered after the Cart button Portal position of the AppBar.

Below

Name	Description
app-bar.below.before	Components are rendered before the 2nd row of the AppBar.
app-bar.below	Components replace the 2nd row of the AppBar.
app-bar.below.after	Components are rendered after the 2nd row of the AppBar.