Flowbite Blazor

Dropdown Examples

The Dropdown component provides a versatile menu that can be triggered by various elements, with customizable placement, size, and content options.

Create a simple dropdown with a list of menu items that can be clicked.


<Dropdown>
    <Label>Dropdown button</Label>
    <ChildContent>
        <DropdownItem OnClick="@(() => Console.WriteLine("Dashboard clicked"))">Dashboard</DropdownItem>
        <DropdownItem OnClick="@(() => Console.WriteLine("Settings clicked"))">Settings</DropdownItem>
        <DropdownItem OnClick="@(() => Console.WriteLine("Earnings clicked"))">Earnings</DropdownItem>
        <DropdownItem OnClick="@(() => Console.WriteLine("Sign out clicked"))">Sign out</DropdownItem>
    </ChildContent>
</Dropdown>

Add a divider between dropdown items to visually separate groups of menu options.


<Dropdown>
    <Label>Dropdown</Label>
    <ChildContent>
        <DropdownItem OnClick="@(() => Console.WriteLine("Dashboard clicked"))">Dashboard</DropdownItem>
        <DropdownItem OnClick="@(() => Console.WriteLine("Settings clicked"))">Settings</DropdownItem>
        <DropdownItem OnClick="@(() => Console.WriteLine("Earnings clicked"))">Earnings</DropdownItem>
        <DropdownDivider />
        <DropdownItem OnClick="@(() => Console.WriteLine("Sign out clicked"))">Sign out</DropdownItem>
    </ChildContent>
</Dropdown>

Add a header to the dropdown menu to provide context or user information.


<Dropdown>
    <Label>Dropdown with header</Label>
    <ChildContent>
        <DropdownHeader>
            <span class="block text-sm">Bonnie Green</span>
            <span class="block truncate text-sm font-medium">name@flowbite.com</span>
        </DropdownHeader>
        <DropdownItem OnClick="@(() => Console.WriteLine("Dashboard clicked"))">Dashboard</DropdownItem>
        <DropdownItem OnClick="@(() => Console.WriteLine("Settings clicked"))">Settings</DropdownItem>
        <DropdownItem OnClick="@(() => Console.WriteLine("Earnings clicked"))">Earnings</DropdownItem>
        <DropdownDivider />
        <DropdownItem OnClick="@(() => Console.WriteLine("Sign out clicked"))">Sign out</DropdownItem>
    </ChildContent>
</Dropdown>

Enhance dropdown items with icons to provide visual cues and improve usability.


<Dropdown>
    <Label>Dropdown with icons</Label>
    <ChildContent>
        <DropdownItem Icon="@(new UserIcon())" OnClick="@(() => Console.WriteLine("Profile clicked"))">Profile</DropdownItem>
        <DropdownItem Icon="@(new GearIcon())" OnClick="@(() => Console.WriteLine("Settings clicked"))">Settings</DropdownItem>
        <DropdownItem Icon="@(new WalletIcon())" OnClick="@(() => Console.WriteLine("Earnings clicked"))">Earnings</DropdownItem>
        <DropdownDivider />
        <DropdownItem Icon="@(new ArrowRightToBracketIcon())" OnClick="@(() => Console.WriteLine("Sign out clicked"))">Sign out</DropdownItem>
    </ChildContent>
</Dropdown>

Use the Inline parameter to make the dropdown appear inline with surrounding text.

View

for your account.


<div class="flex items-center gap-1">
    <span>View</span>
    <Dropdown Inline="true">
        <Label>settings</Label>
        <ChildContent>
            <DropdownItem OnClick="@(() => Console.WriteLine("Profile clicked"))">Profile</DropdownItem>
            <DropdownItem OnClick="@(() => Console.WriteLine("Settings clicked"))">Settings</DropdownItem>
            <DropdownItem OnClick="@(() => Console.WriteLine("Sign out clicked"))">Sign out</DropdownItem>
        </ChildContent>
    </Dropdown>
    <span>for your account.</span>
</div>

Choose from three different dropdown sizes using the Size parameter.


<div class="flex items-center gap-4">
    <Dropdown Size="DropdownSize.Small">
        <Label>Small dropdown</Label>
        <ChildContent>
            <DropdownItem OnClick="@(() => Console.WriteLine("Dashboard clicked"))">Dashboard</DropdownItem>
            <DropdownItem OnClick="@(() => Console.WriteLine("Settings clicked"))">Settings</DropdownItem>
        </ChildContent>
    </Dropdown>
    <Dropdown Size="DropdownSize.Medium">
        <Label>Default dropdown</Label>
        <ChildContent>
            <DropdownItem OnClick="@(() => Console.WriteLine("Dashboard clicked"))">Dashboard</DropdownItem>
            <DropdownItem OnClick="@(() => Console.WriteLine("Settings clicked"))">Settings</DropdownItem>
        </ChildContent>
    </Dropdown>
    <Dropdown Size="DropdownSize.Large">
        <Label>Large dropdown</Label>
        <ChildContent>
            <DropdownItem OnClick="@(() => Console.WriteLine("Dashboard clicked"))">Dashboard</DropdownItem>
            <DropdownItem OnClick="@(() => Console.WriteLine("Settings clicked"))">Settings</DropdownItem>
        </ChildContent>
    </Dropdown>
</div>

Control dropdown menu placement using the Placement parameter.


<div class="flex items-center gap-4">
    <Dropdown Placement="DropdownPlacement.Top">
        <Label>Dropdown top</Label>
        <ChildContent>
            <DropdownItem OnClick="@(() => Console.WriteLine("Dashboard clicked"))">Dashboard</DropdownItem>
            <DropdownItem OnClick="@(() => Console.WriteLine("Settings clicked"))">Settings</DropdownItem>
        </ChildContent>
    </Dropdown>
    <Dropdown Placement="DropdownPlacement.Right">
        <Label>Dropdown right</Label>
        <ChildContent>
            <DropdownItem OnClick="@(() => Console.WriteLine("Dashboard clicked"))">Dashboard</DropdownItem>
            <DropdownItem OnClick="@(() => Console.WriteLine("Settings clicked"))">Settings</DropdownItem>
        </ChildContent>
    </Dropdown>
    <Dropdown Placement="DropdownPlacement.Bottom">
        <Label>Dropdown bottom</Label>
        <ChildContent>
            <DropdownItem OnClick="@(() => Console.WriteLine("Dashboard clicked"))">Dashboard</DropdownItem>
            <DropdownItem OnClick="@(() => Console.WriteLine("Settings clicked"))">Settings</DropdownItem>
        </ChildContent>
    </Dropdown>
    <Dropdown Placement="DropdownPlacement.Left">
        <Label>Dropdown left</Label>
        <ChildContent>
            <DropdownItem OnClick="@(() => Console.WriteLine("Dashboard clicked"))">Dashboard</DropdownItem>
            <DropdownItem OnClick="@(() => Console.WriteLine("Settings clicked"))">Settings</DropdownItem>
        </ChildContent>
    </Dropdown>
</div>

Custom trigger #

Use the CustomTrigger parameter to provide a custom trigger element like an avatar.


<Dropdown>
    <CustomTrigger>
        <Avatar Alt="User settings" ImageUrl="https://flowbite.com/docs/images/people/profile-picture-5.jpg" Rounded="true" />
    </CustomTrigger>
    <ChildContent>
        <DropdownHeader>
            <span class="block text-sm">Bonnie Green</span>
            <span class="block truncate text-sm font-medium">name@flowbite.com</span>
        </DropdownHeader>
        <DropdownItem OnClick="@(() => Console.WriteLine("Dashboard clicked"))">Dashboard</DropdownItem>
        <DropdownItem OnClick="@(() => Console.WriteLine("Settings clicked"))">Settings</DropdownItem>
        <DropdownItem OnClick="@(() => Console.WriteLine("Earnings clicked"))">Earnings</DropdownItem>
        <DropdownDivider />
        <DropdownItem OnClick="@(() => Console.WriteLine("Sign out clicked"))">Sign out</DropdownItem>
    </ChildContent>
</Dropdown>

Dropdown Examples

Default dropdown #

Dropdown divider #

Dropdown header #

Dropdown with icons #

Inline dropdown #

Dropdown sizes #

Dropdown placement #

Custom trigger #