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.
keepInDom
false
By default, the dropdown content is only added to the DOM when it is shown. Set this to true to keep the content in the DOM (visually hidden) at all times, which is useful for static HTML pages that need the content to be present in the markup (e.g. for SEO).

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

Keep in DOM

Keep the content in the DOM (visually hidden) even while closed, instead of mounting/unmounting it on show. This is needed for static HTML pages that must have the content present in the markup.

<Dropdown bind:show={showDropdown} keepInDom>
    {#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>

Positioning and Alignment

Position of the dropdown
Alignment of the dropdown
Action 1
Action 2
Action 3
HYVOR Logo