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>
Action 1
Action 2
Action 3

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>
Hyvor Talk
Commenting Platform
Hyvor Blogs
Blogging Platform

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>
Hyvor Talk
Commenting Platform
Hyvor Blogs
Blogging Platform

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>
Product
Hyvor Talk
Commenting Platform
Hyvor Blogs
Blogging Platform
Plan
Starter $9/month
Growth $19/month
Premium $49/month

Positioning and Alignment

Position of the dropdown
Alignment of the dropdown
Action 1
Action 2
Action 3
Table of Contents