MudBlazor

Lists

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

Simple List

Inbox

Sent


Trash

Spam

<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

<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

<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

<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:
Sparkling Water (1)

Sparkling Water

Teas

Earl Grey

Matcha

Pu'er

Coffees

Irish Coffee

Double Espresso

Cafe Latte

<MudPaper Width="300px">
    <MudList Clickable="true" @bind-SelectedItem="selectedItem" @bind-SelectedValue="selectedValue">
        <MudListSubheader>
            Your drink:
            <MudChip Color="Color.Secondary">
                @(selectedItem?.Text ?? "You are dry") (@(selectedValue?.ToString() ?? "0"))
            </MudChip>
        </MudListSubheader>
        <MudListItem Text="Sparkling Water" Value="1"/>
        <MudListItem Text="Teas">
            <NestedList>
                <MudListItem Text="Earl Grey" Value="2" />
                <MudListItem Text="Matcha"  Value="3"/>
                <MudListItem Text="Pu'er"  Value="4"/>
            </NestedList>
        </MudListItem>
        <MudListItem Text="Coffees">
            <NestedList>
                <MudListItem Text="Irish Coffee"  Value="5"/>
                <MudListItem Text="Double Espresso"  Value="6"/>
                <MudListItem Text="Cafe Latte"  Value="7"/>
            </NestedList>
        </MudListItem>
    </MudList>
</MudPaper>
@code
{
    MudListItem selectedItem;
    object selectedValue = 1;
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙