Mudblazor
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

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
<MudList Clickable="true">
    <MudListItem Text="Inbox" Icon="@Icons.Material.Inbox"/>
    <MudListItem Text="Sent" Icon="@Icons.Material.Send"/>
    <MudDivider />
    <MudListItem Text="Trash"/>
    <MudListItem Text="Spam"/>
</MudList>

Nested List

Nested List Items

Sent mail

Drafts

Inbox

Starred

Snoozed

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

Folder List

Photos

Work

Vacation

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

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
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>
        <MudList Clickable="@Clickable" Dense="@Dense" DisableGutters="@Gutters">
            <MudListItem Text="Single List Item" />
            <MudListItem Text="Single List Item" />
            <MudListItem Text="Single List Item" />
        </MudList>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudText Typo="Typo.h6" GutterBottom="true">Icons with text</MudText>
        <MudList Clickable="@Clickable" Dense="@Dense" DisableGutters="@Gutters">
            <MudListItem Text="Single List Item" Icon="@Icons.Material.Bookmark" />
            <MudListItem Text="Single List Item" Icon="@Icons.Material.Bookmark" />
            <MudListItem Text="Single List Item" Icon="@Icons.Material.Bookmark" />
        </MudList>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudText Typo="Typo.h6" GutterBottom="true">Avatar with text</MudText>
        <MudList Clickable="@Clickable" Dense="@Dense" DisableGutters="@Gutters">
            <MudListItem Text="Single List Item" Avatar="@Icons.Material.Image" />
            <MudListItem Text="Single List Item" Avatar="@Icons.Material.Image" />
            <MudListItem Text="Single List Item" Avatar="@Icons.Material.Image" />
        </MudList>
    </MudItem>
</MudGrid>
@code {
    public bool Dense { get; set; }
    public bool Clickable { get; set; }
    public bool Gutters { get; set; }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙