Dropdown - LumexUI

Composition

This component is a composition of 3 key components:

LumexDropdown: A component that represents a dropdown, extending Popover.
LumexDropdownMenu: A component that represents a dropdown menu.
LumexDropdownItem: A component that represents a dropdown item.

Usage

The dropdown provides a menu that expands when triggered, allowing users to select an action from a list.

@using LumexUI.Services

@inject IPopoverService PopoverService

<LumexButton Variant="@Variant.Outlined"
             OnClick="@TriggerAsync"
             data-popoverref="@_dropdownId">
    Open Dropdown
</LumexButton>

<LumexDropdown Id="@_dropdownId">
    <LumexDropdownMenu>
        <LumexDropdownItem>New file</LumexDropdownItem>
        <LumexDropdownItem>Edit file</LumexDropdownItem>
        <LumexDropdownItem>Share file</LumexDropdownItem>
        <LumexDropdownItem Color="@ThemeColor.Danger" Class="text-danger">
            Delete file
        </LumexDropdownItem>
    </LumexDropdownMenu>
</LumexDropdown>

@code {
    private string _dropdownId = "dropdown-usage";

    private Task TriggerAsync()
    {
        return PopoverService.TriggerAsync( _dropdownId );
    }
}

Disabled

The dropdown items can be disabled to prevent user interaction. A disabled dropdown item is faded and does not respond to user clicks.

You can achieve this by using the Disabled parameter on a DropdownItem.

@using LumexUI.Services

@inject IPopoverService PopoverService

<LumexButton Variant="@Variant.Outlined"
             OnClick="@TriggerAsync"
             data-popoverref="@_dropdownId">
    Open Dropdown
</LumexButton>

<LumexDropdown Id="@_dropdownId">
    <LumexDropdownMenu>
        <LumexDropdownItem>New file</LumexDropdownItem>
        <LumexDropdownItem>Edit file</LumexDropdownItem>
        <LumexDropdownItem>Share file</LumexDropdownItem>
        <LumexDropdownItem Disabled="@true"
                           Color="@ThemeColor.Danger"
                           Class="text-danger">
            Delete file
        </LumexDropdownItem>
    </LumexDropdownMenu>
</LumexDropdown>

@code {
    private string _dropdownId = "dropdown-disabled";

    private Task TriggerAsync()
    {
        return PopoverService.TriggerAsync( _dropdownId );
    }
}

Alternatively, you can achieve this by using the DisabledItems parameter on a DropdownMenu.

@using LumexUI.Services

@inject IPopoverService PopoverService

<LumexButton Variant="@Variant.Outlined"
             OnClick="@TriggerAsync"
             data-popoverref="@_dropdownId">
    Open Dropdown
</LumexButton>

<LumexDropdown Id="@_dropdownId">
    <LumexDropdownMenu DisabledItems="@(["share", "delete"])">
        <LumexDropdownItem Id="@("new")">New file</LumexDropdownItem>
        <LumexDropdownItem Id="@("edit")">Edit file</LumexDropdownItem>
        <LumexDropdownItem Id="@("share")">Share file</LumexDropdownItem>
        <LumexDropdownItem Id="@("delete")"
                           Color="@ThemeColor.Danger"
                           Class="text-danger">
            Delete file
        </LumexDropdownItem>
    </LumexDropdownMenu>
</LumexDropdown>

@code {
    private string _dropdownId = "dropdown-disabled-items";

    private Task TriggerAsync()
    {
        return PopoverService.TriggerAsync( _dropdownId );
    }
}

It's important to set a unique Id for each item, otherwise the disabled items will not work.

Colors & Variants

Customize the dropdown with different visual styles and color themes to match your application’s design.

@using LumexUI.Services

@inject IPopoverService PopoverService

<div class="flex flex-wrap gap-4">
    @foreach( var variant in Enum.GetValues<MenuVariant>() )
    {
        var id = $"dropdown-{variant.ToString()}";

        <LumexButton Color="@_color"
                     Variant="@GetTriggerVariant(variant)"
                     OnClick="@(() => TriggerAsync(id))"
                     data-popoverref="@id">
            @variant.ToString()
        </LumexButton>

        <LumexDropdown Id="@id">
            <LumexDropdownMenu Color="@_color" Variant="@variant">
                <LumexDropdownItem>New file</LumexDropdownItem>
                <LumexDropdownItem>Edit file</LumexDropdownItem>
                <LumexDropdownItem>Share file</LumexDropdownItem>
                <LumexDropdownItem Color="@ThemeColor.Danger"
                                   Class="text-danger">
                    Delete file
                </LumexDropdownItem>
            </LumexDropdownMenu>
        </LumexDropdown>
    }
</div>

<LumexRadioGroup Label="Choose a dropdown color"
                 Orientation="@Orientation.Horizontal"
                 @bind-Value="@_color">
    @foreach( var color in Enum.GetValues<ThemeColor>()[1..] )
    {
        <LumexRadio Value="@color" Color="@color">
            @color.ToString()
        </LumexRadio>
    }
</LumexRadioGroup>

@code {
    private ThemeColor _color = ThemeColor.Default;

    private Task TriggerAsync( string id )
    {
        return PopoverService.TriggerAsync( id );
    }

    private Variant GetTriggerVariant( MenuVariant variant )
    {
        return variant switch
        {
            MenuVariant.Solid => Variant.Solid,
            MenuVariant.Outlined => Variant.Outlined,
            MenuVariant.Flat => Variant.Flat,
            MenuVariant.Shadow => Variant.Shadow,
            MenuVariant.Light => Variant.Light,
            _ => throw new NotSupportedException()
        };
    }
}

Start & End Content

Add custom content, such as icons or additional information, to the start or end of each item in the dropdown.

@using LumexUI.Services

@inject IPopoverService PopoverService

<LumexButton Variant="@Variant.Outlined"
             OnClick="@TriggerAsync"
             data-popoverref="@_dropdownId">
    Open Dropdown
</LumexButton>

<LumexDropdown Id="@_dropdownId">
    <LumexDropdownMenu>
        <LumexDropdownItem StartContent="@_newFile">
            New file
        </LumexDropdownItem>
        <LumexDropdownItem StartContent="@_editFile">
            Edit file
        </LumexDropdownItem>
        <LumexDropdownItem StartContent="@_shareFile">
            Share file
        </LumexDropdownItem>
        <LumexDropdownItem StartContent="@_deleteFile"
                           Color="@ThemeColor.Danger"
                           Class="text-danger">
            Delete file
        </LumexDropdownItem>
    </LumexDropdownMenu>
</LumexDropdown>

@code {
    private RenderFragment _newFile =
        @<LumexIcon Icon="@Icons.Rounded.LibraryAdd"
           Size="@new("20")"
           Class="text-default-500 shrink-0" />;

    private RenderFragment _editFile =
        @<LumexIcon Icon="@Icons.Rounded.EditSquare"
           Size="@new("20")"
           Class="text-default-500 shrink-0" />;

    private RenderFragment _shareFile =
        @<LumexIcon Icon="@Icons.Rounded.Share"
           Size="@new("20")"
           Class="text-default-500 shrink-0" />;

    private RenderFragment _deleteFile =
        @<LumexIcon Icon="@Icons.Rounded.Delete"
           Size="@new("20")"
           Class="shrink-0" />;

    private string _dropdownId = "dropdown-start-end-content";

    private Task TriggerAsync()
    {
        return PopoverService.TriggerAsync( _dropdownId );
    }
}

Description

Add a description to individual dropdown item to provide additional context or details about the actions.

@using LumexUI.Services

@inject IPopoverService PopoverService

<LumexButton Variant="@Variant.Outlined"
             OnClick="@TriggerAsync"
             data-popoverref="@_dropdownId">
    Open Dropdown
</LumexButton>

<LumexDropdown Id="@_dropdownId">
    <LumexDropdownMenu Variant="@MenuVariant.Flat">
        <LumexDropdownItem Description="Create a new file"
                           StartContent="@_newFile">
            New file
        </LumexDropdownItem>
        <LumexDropdownItem Description="Edit the file"
                           StartContent="@_editFile">
            Edit file
        </LumexDropdownItem>
        <LumexDropdownItem Description="Share the file"
                           StartContent="@_shareFile">
            Share file
        </LumexDropdownItem>
        <LumexDropdownItem Description="Delete the file"
                           StartContent="@_deleteFile"
                           Color="@ThemeColor.Danger"
                           Class="text-danger">
            Delete file
        </LumexDropdownItem>
    </LumexDropdownMenu>
</LumexDropdown>

@code {
    private RenderFragment _newFile =
        @<LumexIcon Icon="@Icons.Rounded.LibraryAdd"
                    Size="@new("20")"
                    Class="text-default-500 shrink-0" />;

    private RenderFragment _editFile =
        @<LumexIcon Icon="@Icons.Rounded.EditSquare"
                    Size="@new("20")"
                    Class="text-default-500 shrink-0" />;

    private RenderFragment _shareFile =
        @<LumexIcon Icon="@Icons.Rounded.Share"
                    Size="@new("20")"
                    Class="text-default-500 shrink-0" />;

    private RenderFragment _deleteFile =
        @<LumexIcon Icon="@Icons.Rounded.Delete"
                    Size="@new("20")"
                    Class="shrink-0" />;

    private string _dropdownId = "dropdown-description";

    private Task TriggerAsync()
    {
        return PopoverService.TriggerAsync( _dropdownId );
    }
}

Empty Content

Define custom content to display when the dropdown has no items, providing a better user experience.

@using LumexUI.Services

@inject IPopoverService PopoverService

<LumexButton Variant="@Variant.Outlined"
             OnClick="@TriggerAsync"
             data-popoverref="@_dropdownId">
    Open Dropdown
</LumexButton>

<LumexDropdown Id="@_dropdownId">
    <LumexDropdownMenu>
        <EmptyContent>
            <span class="text-small">No items \(o_o)/</span>
        </EmptyContent>
    </LumexDropdownMenu>
</LumexDropdown>

@code {
    private string _dropdownId = "dropdown-empty-content";

    private Task TriggerAsync()
    {
        return PopoverService.TriggerAsync( _dropdownId );
    }
}

Custom Styles

This component suppots named slots (represented as data-* attributes) that allow you to apply custom CSS to specific parts of the component.

LumexDropdownMenu

Base: The main container for the entire dropdown menu.
List: The wrapper for the dropdown items, containing all dropdown items.
EmptyContent: The area displayed when the dropdown is empty.

LumexDropdownItem

Base: The main container for the dropdown item.
Wrapper: The wrapper for the title, description, and icons.
Title: The title of the dropdown item.
Description: The description of the dropdown item.

You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:

Dropdown Menu

Class: The CSS class names to style the wrapper.
Classes: The CSS class names to style the slots.
ItemClasses: The CSS class names to style the items slots.

Dropdown Item

Class: The CSS class names to style the wrapper.
Classes: The CSS class names to style the slots.

@using LumexUI.Services

@inject IPopoverService PopoverService

<LumexButton Variant="@Variant.Outlined"
             OnClick="@TriggerAsync"
             data-popoverref="@_dropdownId">
    Open Dropdown
</LumexButton>

<LumexDropdown Id="@_dropdownId"
               ShowArrow="@true"
               Radius="@Radius.Small"
               Classes="@_classes">
    <LumexDropdownMenu Class="p-3"
                       ItemClasses="@_itemClasses">
        <LumexDropdownItem Disabled="@true"
                           Class="h-14 gap-2 opacity-100">
            <div class="inline-flex flex-col items-start">
                <span class="text-small text-default-600">John Doe</span>
                <span class="text-tiny text-default-500">@@johndoe</span>
            </div>
        </LumexDropdownItem>
        <LumexDropdownItem>Dashboard</LumexDropdownItem>
        <LumexDropdownItem ShowDivider="@true">
            Settings
        </LumexDropdownItem>
        <LumexDropdownItem ShowDivider="@true"
                           ReadOnly="@true">
            <ChildContent>
                Theme
            </ChildContent>
            <EndContent>
                <select id="theme"
                        name="theme"
                        class="z-10 outline-none w-16 py-0.5 rounded-md text-tiny group-hover:border-default-500 border border-default-300 bg-transparent text-default-500">
                    <option>Light</option>
                    <option>Dark</option>
                    <option>System</option>
                </select>
            </EndContent>
        </LumexDropdownItem>
        <LumexDropdownItem>Help & Support</LumexDropdownItem>
        <LumexDropdownItem>
            <ChildContent>
                Log Out
            </ChildContent>
            <EndContent>
                <LumexIcon Icon="@Icons.Rounded.Logout" Size="@new("20")" />
            </EndContent>
        </LumexDropdownItem>
    </LumexDropdownMenu>
</LumexDropdown>

@code {
    private PopoverSlots _classes = new()
    {
        Content = "p-0 border-small border-divider bg-background",
        Arrow = "bg-default-200"
    };

    private DropdownItemSlots _itemClasses = new()
    {
        Base = new ElementClass()
            .Add( "rounded-md" )
            .Add( "text-default-500" )
            .Add( "transition-opacity" )
            .Add( "hover:text-foreground" )
            .Add( "hover:bg-default-100" )
            .Add( "active:opacity-focus" )
            .ToString()
    };

    private string _dropdownId = "dropdown-custom-styles";

    private Task TriggerAsync()
    {
        return PopoverService.TriggerAsync( _dropdownId );
    }
}

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

LumexDropdownMenu

LumexDropdownItem

Dropdown Menu

Dropdown Item

On this page