Dropdown - LumexUI

Composition

This component is a composition of 4 key components:

LumexDropdown: A component that represents a dropdown, extending Popover.
LumexDropdownTrigger: A component that represents a dropdown trigger.
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.

<LumexDropdown>
    <LumexDropdownTrigger>
        <LumexButton Variant="@Variant.Outlined">
            Open Dropdown
        </LumexButton>
    </LumexDropdownTrigger>
    <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>

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.

<LumexDropdown>
    <LumexDropdownTrigger>
        <LumexButton Variant="@Variant.Outlined">
            Open Dropdown
        </LumexButton>
    </LumexDropdownTrigger>
    <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>

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

<LumexDropdown>
    <LumexDropdownTrigger>
        <LumexButton Variant="@Variant.Outlined">
            Open Dropdown
        </LumexButton>
    </LumexDropdownTrigger>
    <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>

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.

<div class="flex flex-wrap gap-4">
    @foreach( var variant in Enum.GetValues<MenuVariant>() )
    {
        <LumexDropdown>
            <LumexDropdownTrigger>
                <LumexButton Color="@_color"
                             Variant="@GetTriggerVariant(variant)">
                    @variant.ToString()
                </LumexButton>
            </LumexDropdownTrigger>
            <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 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 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.Shared.Icons

<LumexDropdown>
    <LumexDropdownTrigger>
        <LumexButton Variant="@Variant.Outlined">
            Open Dropdown
        </LumexButton>
    </LumexDropdownTrigger>
    <LumexDropdownMenu>
        <LumexDropdownItem>
            <StartContent>
                <SquarePlusIcon Size="18" class="text-default-500 shrink-0" />
            </StartContent>
            <ChildContent>New file</ChildContent>
        </LumexDropdownItem>

        <LumexDropdownItem>
            <StartContent>
                <SquarePenIcon Size="18" class="text-default-500 shrink-0" />
            </StartContent>
            <ChildContent>Edit file</ChildContent>
        </LumexDropdownItem>

        <LumexDropdownItem>
            <StartContent>
                <ShareIcon Size="18" class="text-default-500 shrink-0" />
            </StartContent>
            <ChildContent>Share file</ChildContent>
        </LumexDropdownItem>

        <LumexDropdownItem Color="@ThemeColor.Danger" Class="text-danger">
            <StartContent>
                <Trash2Icon Size="18" class="shrink-0" />
            </StartContent>
            <ChildContent>Delete file</ChildContent>
        </LumexDropdownItem>
    </LumexDropdownMenu>
</LumexDropdown>

Description

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

@using LumexUI.Shared.Icons

<LumexDropdown>
    <LumexDropdownTrigger>
        <LumexButton Variant="@Variant.Outlined">
            Open Dropdown
        </LumexButton>
    </LumexDropdownTrigger>
    <LumexDropdownMenu Variant="@MenuVariant.Flat">
        <LumexDropdownItem Description="Create a new file">
            <StartContent>
                <SquarePlusIcon Size="18" class="text-default-500 shrink-0" />
            </StartContent>
            <ChildContent>New file</ChildContent>
        </LumexDropdownItem>

        <LumexDropdownItem Description="Edit the file">
            <StartContent>
                <SquarePenIcon Size="18" class="text-default-500 shrink-0" />
            </StartContent>
            <ChildContent>Edit file</ChildContent>
        </LumexDropdownItem>

        <LumexDropdownItem Description="Share the file">
            <StartContent>
                <ShareIcon Size="18" class="text-default-500 shrink-0" />
            </StartContent>
            <ChildContent>Share file</ChildContent>
        </LumexDropdownItem>

        <LumexDropdownItem Description="Delete the file"
                           Color="@ThemeColor.Danger"
                           Class="text-danger">
            <StartContent>
                <Trash2Icon Size="18" class="shrink-0" />
            </StartContent>
            <ChildContent>Delete file</ChildContent>
        </LumexDropdownItem>
    </LumexDropdownMenu>
</LumexDropdown>

Empty Content

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

<LumexDropdown>
    <LumexDropdownTrigger>
        <LumexButton Variant="@Variant.Outlined">
            Open Dropdown
        </LumexButton>
    </LumexDropdownTrigger>
    <LumexDropdownMenu>
        <EmptyContent>
            <span class="text-small">No items \(o_o)/</span>
        </EmptyContent>
    </LumexDropdownMenu>
</LumexDropdown>

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.Shared.Icons

<LumexDropdown ShowArrow="@true"
               Radius="@Radius.Small"
               Classes="@_classes">
    <LumexDropdownTrigger>
        <LumexButton Variant="@Variant.Outlined">
            Open Dropdown
        </LumexButton>
    </LumexDropdownTrigger>
    <LumexDropdownMenu Class="p-3"
                       ItemClasses="@_itemClasses">
        <LumexDropdownItem Disabled="@true"
                           Class="h-14 gap-2 opacity-100">
            <div class="flex items-center gap-2">
                <LumexAvatar Size="@Size.Small"
                             Name="John Doe"
                             Src="https://i.pravatar.cc/150?img=2" />
                <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>
            </div>
        </LumexDropdownItem>
        <LumexDropdownItem>Dashboard</LumexDropdownItem>
        <LumexDropdownItem>Notifications</LumexDropdownItem>
        <LumexDropdownItem ShowDivider="@true">
            Settings
        </LumexDropdownItem>
        <LumexDropdownItem ShowDivider="@true"
                           ReadOnly="@true">
            <ChildContent>
                Theme
            </ChildContent>
            <EndContent>
                <select id="theme"
                        name="theme"
                        class="z-10 outline-hidden 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>
                <LogoutIcon Size="16" />
            </EndContent>
        </LumexDropdownItem>
    </LumexDropdownMenu>
</LumexDropdown>

@code {
    private PopoverSlots _classes = new()
    {
        Content = "p-0 border 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()
    };
}

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