Expansion Panel

See Expansion Panel API for parameter documentation.

Simple Usage

Panel One
Panel One Content
Panel Two
Panel Two Content
Panel Three
Panel Three Content
Panel Four
Panel Four Content
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudExpansionPanels>
    <MudExpansionPanel Text="Panel One" MaxHeight="150">
        Panel One Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Two" MaxHeight="500">
        Panel Two Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Three" MaxHeight="1000">
        Panel Three Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Four">
        Panel Four Content
    </MudExpansionPanel>
</MudExpansionPanels>

Multiple Expanded Panels

Panel One
Panel One Content
Panel Two
Panel Two Content
Panel Three
Panel Three Content
Panel Four
Panel Four Content
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudExpansionPanels MultiExpansion="true">
    <MudExpansionPanel Text="Panel One">
        Panel One Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Two">
        Panel Two Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Three">
        Panel Three Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Four">
        Panel Four Content
    </MudExpansionPanel>
</MudExpansionPanels>

Disabled

Panel One
Panel One Content
Panel Two
Panel Two Content
Panel Three
Panel Three Content
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudExpansionPanels>
    <MudExpansionPanel Text="Panel One">
        Panel One Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Two" Disabled="true">
        Panel Two Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Three">
        Panel Three Content
    </MudExpansionPanel>
</MudExpansionPanels>

Padding

The padding of the panels can be controlled with DisableGutters and Dense this can be done per panel or on all from the parent.

Dense
Dense Content
Gutters
Gutters Content
Dense & Gutters from parent
Dense & Gutters Content
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudExpansionPanels>
    <MudExpansionPanel Text="Dense" Dense="true">
        Dense Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Gutters" DisableGutters="true">
        Gutters Content
    </MudExpansionPanel>
</MudExpansionPanels>
<MudExpansionPanels Dense="true" DisableGutters="true" Class="mt-6">
    <MudExpansionPanel Text="Dense & Gutters from parent">
        Dense & Gutters Content
    </MudExpansionPanel>
</MudExpansionPanels>

Borders

The DisableBorders property removes all borders around the panel.
For more flat ui design this might be prefered along with Elevation set to 0.

Panel One
Panel One Content
Panel Two
Panel Two Content
Panel Three
Panel Three Content
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudExpansionPanels DisableBorders="true" Elevation="0">
    <MudExpansionPanel Text="Panel One">
        Panel One Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Two">
        Panel Two Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Three">
        Panel Three Content
    </MudExpansionPanel>
</MudExpansionPanels>

Customizing the Header and Icon

Panel header as RenderFragment

Panel Content
The icon of this panel is hidden
Panel Content

Inbox

3
Panel Content

Overriding standard icon with own icon

Panel Content
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<div class="mx-auto"  style="max-width: 400px;">
    <MudExpansionPanels>
        <MudExpansionPanel>
            <TitleContent>
                <div class="d-flex">
                    <MudIcon Icon="@Icons.Material.Filled.Info" class="mr-3"></MudIcon>
                    <MudText>Panel header as <strong>RenderFragment</strong></MudText>
                </div>
            </TitleContent>
            <ChildContent>
                Panel Content
            </ChildContent>
        </MudExpansionPanel>
        <MudExpansionPanel Text="The icon of this panel is hidden" HideIcon="true">
            Panel Content
        </MudExpansionPanel>
        <MudExpansionPanel HideIcon="true">
            <TitleContent>
                <div class="d-flex">
                    <MudText Class="mt-1">Inbox</MudText>
                    <MudBadge Content="3" Color="Color.Primary" Overlap="true" Class="d-flex ml-auto">
                        <MudIcon Icon="@Icons.Material.Filled.Email" Color="Color.Default" />
                    </MudBadge>
                </div>
            </TitleContent>
            <ChildContent>
                Panel Content
            </ChildContent>
        </MudExpansionPanel>
        <MudExpansionPanel @bind-IsExpanded="isOpen" HideIcon="true">
            <TitleContent>
                <div class="d-flex">
                    <MudText>Overriding standard icon with own icon</MudText>
                    <MudIcon Icon="@(isOpen ? Icons.Material.Filled.Close : Icons.Material.Filled.Add)" class="ml-auto"></MudIcon>
                </div>
            </TitleContent>
            <ChildContent>
                Panel Content
            </ChildContent>
        </MudExpansionPanel>
    </MudExpansionPanels>
</div>
@code
{
    bool isOpen;
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙