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}>
    <Button slot="trigger" color="gray">
        Page <IconCaretDown slot="end" />
    </Button>
    <ActionList slot="content">
        {#each [1,2,3] as i}
            <ActionListItem on:select={() => {showDropdown = false}}>
                Action {i}
            </ActionListItem>
        {/each}
    </ActionList>
</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}>
    <Button slot="trigger" color="gray">
        <Text light small slot="start">Product</Text>
        
        {#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}

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

Multi Selection

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

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

Positioning and Alignment

Table of Contents