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
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="" Label="Dense" Color="Color.Default" /> <MudCheckBox @bind-Checked="" Label="Clickable" Color="Color.Primary" /> <MudCheckBox @bind-Checked="" 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="" Dense="" DisableGutters=""> <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="" Dense="" DisableGutters=""> <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="" Dense="" DisableGutters=""> <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.
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.
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; }