Lists

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

API
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.Material.Filled.Bookmark" />
                <MudListItem Text="Single List Item" Icon="@Icons.Material.Filled.Bookmark" IconColor="Color.Primary" />
                <MudListItem Text="Single List Item" Icon="@Icons.Material.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.Material.Filled.Image" />
                <MudListItem Text="Single List Item" Avatar="@Icons.Material.Filled.Image" IconColor="Color.Dark" />
                <MudListItem Text="Single List Item" Avatar="@Icons.Material.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;
}
Color

In selectable MudList, you can also set the selected item's color.

Select Your Character:

Neutral

Good

Frodo Baggins

Harry Potter

Evil

Sauron

Voldemort

Mckaragoz

Im not hero

<MudStack Row="true">
    <MudPaper Width="300px">
        <MudList Clickable="true" @bind-SelectedItem="selectedItem" @bind-SelectedValue="selectedValue" Color="_color">
            <MudListSubheader>
                Select Your Character:
            </MudListSubheader>
            <MudListItem Text="Neutral" Value="1" />
            <MudListItem Text="Good">
                <NestedList>
                    <MudListItem Text="Frodo Baggins" Value="2" />
                    <MudListItem Text="Harry Potter" Value="3" />
                </NestedList>
            </MudListItem>
            <MudListItem Text="Evil">
                <NestedList>
                    <MudListItem Text="Sauron" Value="5" />
                    <MudListItem Text="Voldemort" Value="6" />
                    <MudListItem Text="Mckaragoz" Value="7" />
                </NestedList>
            </MudListItem>
            <MudListItem Disabled="true" Text="Im not hero" Value="7" />
        </MudList>
    </MudPaper>
    <MudPaper Class="pe-4">
        <MudRadioGroup T="Color" @bind-SelectedOption="_color" Class="d-flex flex-column">
            <MudRadio Option="Color.Primary" Color="Color.Primary">Primary</MudRadio>
            <MudRadio Option="Color.Secondary" Color="Color.Secondary">Secondary</MudRadio>
            <MudRadio Option="Color.Tertiary" Color="Color.Tertiary">Tertiary</MudRadio>
            <MudRadio Option="Color.Info" Color="Color.Info">Info</MudRadio>
            <MudRadio Option="Color.Success" Color="Color.Success">Success</MudRadio>
            <MudRadio Option="Color.Warning" Color="Color.Warning">Warning</MudRadio>
        </MudRadioGroup>
    </MudPaper>
</MudStack>

@code{
    MudListItem selectedItem;
    object selectedValue = 1;
    Color _color = Color.Primary;
}
Link
Menu
An unhandled error has occurred. Reload 🗙