Appbar

README

Demo

Material Design 3 and MD3 Expressive App Bar component.

Features

Variants:
- small (default): 64px standard top app bar
- center-aligned: 64px top app bar with centered headline
- medium-flexible (or medium): Multi-line flexible medium app bar that hugs content
- large-flexible (or large): Multi-line flexible large app bar with prominent headline
- search: Search app bar with embedded pill search container
Text Alignment:
- start (default): Leading edge alignment
- center: Centered headline and subtitle
Subtitle Support: Subtitle text automatically expands height flexibly in medium and large variants.
Scroll Behavior & States:
- Flat (resting) vs Scrolled state (scrolled attribute)
- Surface color switching (Surface -> SurfaceContainer)
- Auto-scroll detection with scroll-target="window" or scroll-target="#container"
- Elevation tinting on scroll
Slots:
- leading: Navigation icon button or menu button
- headline: Title text or custom element (e.g. logo / image)
- subtitle: Subtitle text or supporting elements
- trailing / default slot: Action icon buttons, avatar, overflow menu
- search, search-leading, search-input, search-trailing: For search variant customization

Usage

<!-- Standard Small App Bar -->
<mdc-appbar headline="Inbox">
  <mdc-icon-button slot="leading"><mdc-icon>menu</mdc-icon></mdc-icon-button>
  <mdc-icon-button slot="trailing"><mdc-icon>search</mdc-icon></mdc-icon-button>
  <mdc-icon-button slot="trailing"><mdc-icon>more_vert</mdc-icon></mdc-icon-button>
</mdc-appbar>

<!-- Medium Flexible App Bar with Subtitle -->
<mdc-appbar
  variant="medium-flexible"
  headline="Daily activities"
  subtitle="Record new fitness goals"
>
  <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
  <mdc-icon-button slot="trailing"><mdc-icon>add</mdc-icon></mdc-icon-button>
</mdc-appbar>

<!-- Search App Bar -->
<mdc-appbar variant="search" headline="Search product">
  <mdc-icon-button slot="leading"><mdc-icon>menu</mdc-icon></mdc-icon-button>
  <mdc-icon-button slot="trailing"><mdc-icon>account_circle</mdc-icon></mdc-icon-button>
</mdc-appbar>

Alignment

Code

<div style="display: flex; flex-direction: column; gap: 24px; width: 100%;">
    <!-- Start Alignment (Default) -->
    <mdc-appbar alignment="start" headline="Leading edge headline" subtitle="Leading aligned subtitle">
        <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>search</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>more_vert</mdc-icon></mdc-icon-button>
    </mdc-appbar>

    <!-- Centered Alignment -->
    <mdc-appbar alignment="center" headline="Centered headline" subtitle="Centered subtitle">
        <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>more_vert</mdc-icon></mdc-icon-button>
    </mdc-appbar>

    <!-- Medium Flexible with Center Alignment -->
    <mdc-appbar variant="medium-flexible" alignment="center" headline="Centered Medium" subtitle="Centered subtitle in medium flexible">
        <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>more_vert</mdc-icon></mdc-icon-button>
    </mdc-appbar>
</div>

Custom

Code

<div style="display: flex; flex-direction: column; gap: 24px; width: 100%;">
    <!-- Brand Title / Custom Font -->
    <mdc-appbar variant="small">
        <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
        <span slot="headline" style="font-family: serif; font-size: 24px; font-weight: bold; letter-spacing: 1px;">The Fortnightly</span>
        <mdc-icon-button slot="trailing"><mdc-icon>bookmark_border</mdc-icon></mdc-icon-button>
    </mdc-appbar>

    <!-- User Profile Header with Status Subtitle -->
    <mdc-appbar variant="small" headline="Maddison Wells" subtitle="Active now">
        <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>videocam</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>call</mdc-icon></mdc-icon-button>
    </mdc-appbar>

    <!-- Large Flexible with Filled/Tonal Action Button -->
    <mdc-appbar variant="large-flexible" headline="Explore Banff" subtitle="Enjoy hiking trails, gondolas, wildlife, and more">
        <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing" variant="filled-tonal"><mdc-icon>share</mdc-icon></mdc-icon-button>
    </mdc-appbar>
</div>

Scrolled

Code

<div style="display: flex; flex-direction: column; gap: 24px; width: 100%;">
    <!-- Flat / Resting State -->
    <div>
        <p style="margin: 0 0 8px 4px; font-size: 14px; color: var(--md-sys-color-outline, #79747e);">Flat (Resting state)</p>
        <mdc-appbar variant="small" headline="Flat App Bar">
            <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
            <mdc-icon-button slot="trailing"><mdc-icon>search</mdc-icon></mdc-icon-button>
            <mdc-icon-button slot="trailing"><mdc-icon>more_vert</mdc-icon></mdc-icon-button>
        </mdc-appbar>
    </div>

    <!-- On-Scroll State -->
    <div>
        <p style="margin: 0 0 8px 4px; font-size: 14px; color: var(--md-sys-color-outline, #79747e);">On Scroll (Scrolled state - Surface Container + Elevation)</p>
        <mdc-appbar variant="small" headline="Scrolled App Bar" scrolled>
            <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
            <mdc-icon-button slot="trailing"><mdc-icon>search</mdc-icon></mdc-icon-button>
            <mdc-icon-button slot="trailing"><mdc-icon>more_vert</mdc-icon></mdc-icon-button>
        </mdc-appbar>
    </div>

    <!-- Search On-Scroll State -->
    <div>
        <p style="margin: 0 0 8px 4px; font-size: 14px; color: var(--md-sys-color-outline, #79747e);">Search App Bar On Scroll (Higher container surface)</p>
        <mdc-appbar variant="search" headline="Search product" scrolled>
            <mdc-icon-button slot="leading"><mdc-icon>menu</mdc-icon></mdc-icon-button>
            <mdc-icon-button slot="trailing"><mdc-icon>mic</mdc-icon></mdc-icon-button>
            <mdc-icon-button slot="trailing"><mdc-icon>account_circle</mdc-icon></mdc-icon-button>
        </mdc-appbar>
    </div>
</div>

Search

Code

<div style="display: flex; flex-direction: column; gap: 24px; width: 100%;">
    <!-- 1. Leading element and a trailing element outside search -->
    <mdc-appbar variant="search" headline="Search product">
        <mdc-icon-button slot="leading"><mdc-icon>menu</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>account_circle</mdc-icon></mdc-icon-button>
    </mdc-appbar>

    <!-- 2. Leading element, trailing inside search, and trailing outside search -->
    <mdc-appbar variant="search">
        <mdc-icon-button slot="leading"><mdc-icon>menu</mdc-icon></mdc-icon-button>
        <div slot="search" class="search-box" style="display: flex; align-items: center; width: 100%; height: 48px; background-color: var(--md-sys-color-surface-container, #ece6f0); border-radius: 9999px; padding: 0 16px; gap: 12px; box-sizing: border-box;">
            <mdc-icon style="color: var(--md-sys-color-on-surface-variant, #49454f);">search</mdc-icon>
            <span style="flex: 1; color: var(--md-sys-color-on-surface-variant, #49454f); font-size: 16px;">Search emails</span>
            <mdc-icon-button><mdc-icon>mic</mdc-icon></mdc-icon-button>
        </div>
        <mdc-icon-button slot="trailing"><mdc-icon>account_circle</mdc-icon></mdc-icon-button>
    </mdc-appbar>

    <!-- 3. Leading element and two trailing elements outside search -->
    <mdc-appbar variant="search" headline="Search files">
        <mdc-icon-button slot="leading"><mdc-icon>menu</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>tune</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>account_circle</mdc-icon></mdc-icon-button>
    </mdc-appbar>
</div>

Subtitle

Code

<div style="display: flex; flex-direction: column; gap: 24px; width: 100%;">
    <!-- Small with subtitle -->
    <mdc-appbar variant="small" headline="Small with subtitle" subtitle="Supporting text under headline">
        <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>search</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>more_vert</mdc-icon></mdc-icon-button>
    </mdc-appbar>

    <!-- Medium Flexible with subtitle -->
    <mdc-appbar variant="medium-flexible" headline="Daily activities" subtitle="Record new fitness goals">
        <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>more_vert</mdc-icon></mdc-icon-button>
    </mdc-appbar>

    <!-- Large Flexible with subtitle -->
    <mdc-appbar variant="large-flexible" headline="Top 10 hiking trails" subtitle="Discover popular trails in Banff National Park">
        <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>bookmark</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>share</mdc-icon></mdc-icon-button>
    </mdc-appbar>
</div>

Variant

Code

<div style="display: flex; flex-direction: column; gap: 24px; width: 100%;">
    <!-- Small -->
    <mdc-appbar variant="small" headline="Small App Bar">
        <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>search</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>more_vert</mdc-icon></mdc-icon-button>
    </mdc-appbar>

    <!-- Center-aligned -->
    <mdc-appbar variant="center-aligned" headline="Centered App Bar">
        <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>more_vert</mdc-icon></mdc-icon-button>
    </mdc-appbar>

    <!-- Medium Flexible -->
    <mdc-appbar variant="medium-flexible" headline="Medium Flexible">
        <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>search</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>more_vert</mdc-icon></mdc-icon-button>
    </mdc-appbar>

    <!-- Large Flexible -->
    <mdc-appbar variant="large-flexible" headline="Large Flexible">
        <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>search</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>more_vert</mdc-icon></mdc-icon-button>
    </mdc-appbar>

    <!-- Search -->
    <mdc-appbar variant="search" headline="Search product">
        <mdc-icon-button slot="leading"><mdc-icon>menu</mdc-icon></mdc-icon-button>
        <mdc-icon-button slot="trailing"><mdc-icon>account_circle</mdc-icon></mdc-icon-button>
    </mdc-appbar>
</div>