Dropdown

Dropdowns are used to show a list of options when a user clicks on a button. Use the Action List component to show the actions in the dropdown.

Properties

Name

Default

Description

align

start

Alignment of the dropdown. One of:

start
center
end

position

bottom

Position of the dropdown. One of:

top
bottom
left
right

closeOnOutsideClick

true

Whether the dropdown should be closed when the user clicks outside of the dropdown.

show

false

Whether the dropdown should be shown or not. Use this property to control the dropdown.

width

225

Width of the dropdown.

relative

false

Whether the dropdown should be positioned relative to the trigger element.

Examples

In the below examples, we use relative and closeOnOutsideClick=false properties for demonstration purposes. However, in most cases, they are not needed.

Basic

<Dropdown bind:show={showDropdown}>
    {#snippet trigger()}
        <Button color="gray">
            Page
            {#snippet end()}
                <IconCaretDown />
            {/snippet}
        </Button>
    {/snippet}
    {#snippet content()}
        <ActionList>
            {#each [1,2,3] as i}
                <ActionListItem onselect={() => {showDropdown = false}}>
                    Action {i}
                </ActionListItem>
            {/each}
        </ActionList>
    {/snippet}
</Dropdown>

Single Selection

Here's a little more complex example. The key is to set selection="single" in the Action List component.

<Dropdown bind:show={showDropdown} width={350}>
    {#snippet trigger()}
        <Button color="gray">
            {#snippet start()}
                <Text light small>Product</Text>
            {/snippet}

            {#if currentItem === 'talk'}
                <Avatar src={hyvorTalkLogo} size={18} />
                <Text normal style="margin-left:5px;">Hyvor Talk</Text>
            {:else}
                <Avatar src={hyvorBlogsLogo} size={18} />
                <Text normal style="margin-left:5px;">Hyvor Blogs</Text>
            {/if}

            {#snippet end()}
                <IconCaretDown />
            {/snippet}
        </Button>
    {/snippet}
    {#snippet content()}
        <ActionList selection="single">
            <ActionListItem
                selected={currentItem === 'talk'}
                onselect={() => currentItem = 'talk'}
            >
                {#snippet start()}
                    <Avatar src={hyvorTalkLogo} size="small" />
                {/snippet}
                Hyvor Talk
                {#snippet description()}
                    <div>Commenting Platform</div>
                {/snippet}
            </ActionListItem>
            <ActionListItem
                selected={currentItem === 'blogs'}
                onselect={() => currentItem = 'blogs'}
            >
                {#snippet start()}
                    <Avatar src={hyvorBlogsLogo} size="small" />
                {/snippet}
                Hyvor Blogs
                {#snippet description()}
                    <div>Blogging Platform</div>
                {/snippet}
            </ActionListItem>
        </ActionList>
    {/snippet}
</Dropdown>

Multi Selection

For multi selections, use selection="multiple" in the Action List component.

<Dropdown bind:show={showDropdown} width={350}>
    {#snippet trigger()}
        <Button color="gray">
            Select Products ({currentProducts.length})
            {#snippet end()}
                <IconCaretDown />
            {/snippet}
        </Button>
    {/snippet}
    {#snippet content()}
        <ActionList selection="multi">
            <ActionListItem
                selected={currentProducts.includes('talk')}
                onselect={() => handleProductSelect('talk')}
            >
                {#snippet start()}
                    <Avatar src={hyvorTalkLogo} size="small" />
                {/snippet}
                Hyvor Talk
                {#snippet description()}
                    <div>Commenting Platform</div>
                {/snippet}
            </ActionListItem>
            <ActionListItem
                selected={currentProducts.includes('blogs')}
                onselect={() => handleProductSelect('blogs')}
            >
                {#snippet start()}
                    <Avatar src={hyvorBlogsLogo} size="small" />
                {/snippet}
                Hyvor Blogs
                {#snippet description()}
                    <div>Blogging Platform</div>
                {/snippet}
            </ActionListItem>
        </ActionList>
    {/snippet}
</Dropdown>

<script lang="ts">
    let showDropdown = false;
    let currentProducts : string[] = [];

    function handleProductSelect(val: string) {
        if (currentProducts.includes(val)) {
            currentProducts = currentProducts.filter((v) => v !== val);
        } else {
            currentProducts = [...currentProducts, val];
        }
    }
</script>

Groups and Slots

Here is an example using <ActionListGroup> and other slots in the Action List component.

<Dropdown bind:show={showDropdown} width={350}>
    {#snippet trigger()}
        <Button color="gray">
            Filter Results
            {#snippet end()}
                <IconCaretDown />
            {/snippet}
        </Button>
    {/snippet}
    {#snippet content()}
        <ActionList>
            <ActionListGroup selection="multi" title="Product">
                <ActionListItem selected={currentProducts.includes('talk')} onselect={() => handleProductSelect('talk')}>
                    {#snippet start()}
                        <Avatar src={hyvorTalkLogo} size="small" />
                    {/snippet}
                    Hyvor Talk
                    {#snippet description()}
                        <div>Commenting Platform</div>
                    {/snippet}
                </ActionListItem>
                <ActionListItem selected={currentProducts.includes('blogs')} onselect={() => handleProductSelect('blogs')}>
                    {#snippet start()}
                        <Avatar src={hyvorBlogsLogo} size="small" />
                    {/snippet}
                    Hyvor Blogs
                    {#snippet description()}
                        <div>Blogging Platform</div>
                    {/snippet}
                </ActionListItem>
            </ActionListGroup>
            <ActionListGroup selection="single" title="Plan" divider>
                <ActionListItem selected={currentPlan === 'starter'} onselect={() => currentPlan = 'starter'}>
                    Starter
                    {#snippet end()}
                        <Text small light>$9/month</Text>
                    {/snippet}
                </ActionListItem>
                <ActionListItem selected={currentPlan === 'growth'} onselect={() => currentPlan = 'growth'}>
                    Growth
                    {#snippet end()}
                        <Text small light>$19/month</Text>
                    {/snippet}
                </ActionListItem>
                <ActionListItem selected={currentPlan === 'premium'} onselect={() => currentPlan = 'premium'}>
                    Premium
                    {#snippet end()}
                        <Text small light>$49/month</Text>
                    {/snippet}
                </ActionListItem>
            </ActionListGroup>
        </ActionList>
    {/snippet}
</Dropdown>