Basic
<mc-top-app-bar>
<mc-icon slot=leading-icon>arrow_back</mc-icon>
<div slot=headline>Headline</div>
<mc-icon slot=trailing-icon>inbox</mc-icon>
<mc-icon slot=trailing-icon>account_circle</mc-icon>
</mc-top-app-bar>
Auto hide
<mc-top-app-bar autohide>
<mc-icon slot=leading-icon>arrow_back</mc-icon>
<div slot=headline>Headline</div>
<mc-icon slot=trailing-icon>inbox</mc-icon>
<mc-icon slot=trailing-icon>account_circle</mc-icon>
</mc-top-app-bar>
Centered
<mc-top-app-bar centered>
<mc-icon slot=leading-icon>arrow_back</mc-icon>
<div slot=headline>Headline</div>
<mc-icon slot=trailing-icon>account_circle</mc-icon>
</mc-top-app-bar>
Medium
<mc-top-app-bar medium>
<mc-icon slot=leading-icon>arrow_back</mc-icon>
<div slot=headline>Headline</div>
<mc-icon slot=trailing-icon>inbox</mc-icon>
<mc-icon slot=trailing-icon>account_circle</mc-icon>
</mc-top-app-bar>
Large
<mc-top-app-bar large>
<mc-icon slot=leading-icon>arrow_back</mc-icon>
<div slot=headline>Headline</div>
<mc-icon slot=trailing-icon>inbox</mc-icon>
<mc-icon slot=trailing-icon>account_circle</mc-icon>
</mc-top-app-bar>
Compress
Compress only works on medium and large Top app bars. You cannot use auto hide at the same time as auto shrink.
<mc-top-app-bar compress medium>
<mc-icon slot=leading-icon>arrow_back</mc-icon>
<div slot=headline>Headline</div>
<mc-icon slot=trailing-icon>inbox</mc-icon>
<mc-icon slot=trailing-icon>account_circle</mc-icon>
</mc-top-app-bar>
Style
CSS variables that allow you override default values
/* Optional variables for overriding */
--mc-top-app-bar-container-color: var(--mc-navigation-container-color);
--mc-top-app-bar-container-scrolled-color: var(--mc-surface-container);
/* controls all navigation's (drawer, bar, top, bottom, rail) */
--mc-navigation-container-color: var(--mc-surface);