MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Lists

Easily customizable and scrollable lists. Make them suit your needs with avatars, icons, or something like checkboxes.

See Lists API for parameter documentation.

Simple List

Inbox

Sent


Trash

Spam

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudPaper Width="300px">
    <MudList Clickable="true">
        <MudListItem Text="Inbox" Icon="@Icons.Material.Filled.Inbox" />
        <MudListItem Text="Sent" Icon="@Icons.Material.Filled.Send" />
        <MudDivider />
        <MudListItem Text="Trash" />
        <MudListItem Text="Spam" />
    </MudList>
</MudPaper>

Nested List

Nested List Items

Sent mail

Drafts

Inbox

Starred

Snoozed

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudPaper Width="300px">
    <MudList Clickable="true">
        <MudListSubheader>
            Nested List Items
        </MudListSubheader>
        <MudListItem Icon="@Icons.Material.Filled.Send">
            Sent mail
        </MudListItem>
        <MudListItem Icon="@Icons.Material.Filled.Drafts">
            Drafts
        </MudListItem>
        <MudListItem Icon="@Icons.Material.Filled.Inbox" Text="Inbox" InitiallyExpanded="true">
            <NestedList>
                <MudListItem Icon="@Icons.Material.Filled.StarRate">
                    Starred
                </MudListItem>
                <MudListItem Icon="@Icons.Material.Filled.WatchLater">
                    Snoozed
                </MudListItem>
            </NestedList>
        </MudListItem>
    </MudList>
</MudPaper>

Avatar List

Photos

Work

Vacation

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudPaper Width="300px">
    <MudList>
        <MudListItem Avatar="@Icons.Material.Filled.Image">
            Photos
        </MudListItem>
        <MudListItem Avatar="@Icons.Material.Filled.Work">
            Work
        </MudListItem>
        <MudListItem Avatar="@Icons.Material.Filled.Umbrella">
            Vacation
        </MudListItem>
    </MudList>
</MudPaper>

Interactive

Text only

Single List Item

Single List Item

Single List Item

Icons with text

Single List Item

Single List Item

Single List Item

Avatar with text

Single List Item

Single List Item

Single List Item

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" md="12">
        <MudCheckBox @bind-Checked="@Dense" Label="Dense" Color="Color.Default" />
        <MudCheckBox @bind-Checked="@Clickable" Label="Clickable" Color="Color.Primary" />
        <MudCheckBox @bind-Checked="@Gutters" Label="Disable Gutters" Color="Color.Secondary" />
    </MudItem>
    <MudItem xs="12" md="6">
        <MudText Typo="Typo.h6" GutterBottom="true">Text only</MudText>
        <MudPaper Width="100%">
            <MudList Clickable="@Clickable" Dense="@Dense" DisableGutters="@Gutters">
                <MudListItem Text="Single List Item" />
                <MudListItem Text="Single List Item" />
                <MudListItem Text="Single List Item" />
            </MudList>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudText Typo="Typo.h6" GutterBottom="true">Icons with text</MudText>
        <MudPaper Width="100%">
            <MudList Clickable="@Clickable" Dense="@Dense" DisableGutters="@Gutters">
                <MudListItem Text="Single List Item" Icon="@Icons.Filled.Bookmark" />
                <MudListItem Text="Single List Item" Icon="@Icons.Filled.Bookmark" IconColor="Color.Primary" />
                <MudListItem Text="Single List Item" Icon="@Icons.Filled.Bookmark" IconColor="Color.Secondary" />
            </MudList>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudText Typo="Typo.h6" GutterBottom="true">Avatar with text</MudText>
        <MudPaper Width="100%">
            <MudList Clickable="@Clickable" Dense="@Dense" DisableGutters="@Gutters">
                <MudListItem Text="Single List Item" Avatar="@Icons.Filled.Image" />
                <MudListItem Text="Single List Item" Avatar="@Icons.Filled.Image" IconColor="Color.Dark" />
                <MudListItem Text="Single List Item" Avatar="@Icons.Filled.Image" IconColor="Color.Error" />
            </MudList>
        </MudPaper>
    </MudItem>
</MudGrid>
@code {
    public bool Dense { get; set; }
    public bool Clickable { get; set; }
    public bool Gutters { get; set; }
}

Selection

If you set Clickable="true" and use @bind-SelectedItem, MudList will manage an exclusive single-selection across all its nested lists for you.

Your drink:
You are dry

Sparkling Water

Teas

Earl Grey

Matcha

Pu'er

Coffees

Irish Coffee

Double Espresso

Cafe Latte

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudPaper Width="300px">
    <MudList Clickable="true" @bind-SelectedItem="selectedItem">
        <MudListSubheader>
            Your drink:
            <MudChip Color="Color.Secondary">
                @(selectedItem?.Text ?? "You are dry")
            </MudChip>
        </MudListSubheader>
        <MudListItem Text="Sparkling Water" />
        <MudListItem Text="Teas">
            <NestedList>
                <MudListItem Text="Earl Grey" />
                <MudListItem Text="Matcha" />
                <MudListItem Text="Pu'er" />
            </NestedList>
        </MudListItem>
        <MudListItem Text="Coffees">
            <NestedList>
                <MudListItem Text="Irish Coffee" />
                <MudListItem Text="Double Espresso" />
                <MudListItem Text="Cafe Latte" />
            </NestedList>
        </MudListItem>
    </MudList>
</MudPaper>
@code
{
    MudListItem selectedItem;
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙