BlazorUI Demo

List and list item

Structured, navigable and selectable collections with secondary content and actions.

Rich list items
View code 
<BuiList TValue="string" Dividers>
    <BuiListItem Value="@("Ada")" StartIcon="LucideIcons.User"><SecondaryContent>Administrator</SecondaryContent><ChildContent>Ada Lovelace</ChildContent></BuiListItem>
    <BuiListItem Value="@("Orders")" Href="/data-grid" StartIcon="LucideIcons.Package">Orders</BuiListItem>
</BuiList>
Multiple selection
View code 
<BuiList TValue="int" Selectable SelectionMode="SelectionMode.Multiple" @bind-Values="selectedRows" Dividers>
    <BuiListItem Value="1">First item</BuiListItem>
    <BuiListItem Value="2">Second item</BuiListItem>
    <BuiListItem Value="3">Third item</BuiListItem>
</BuiList>

@code {
    private IReadOnlyCollection<int> selectedRows = [1];
}