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.