Dropdown Menu

Displays a menu to the user, which can consist of links or functions, as well as additional sub-menus, triggered by a button.

You can update the styles of the items on a global level inside the Dropdown.Menu component with the itemStyle and itemDisabledStyle props. These automatically get passed to any children items (also the radio group items and checkbox items). You can also overwrite the styles of individual items however. The preview has an example of this, which changes the background colour of the delete item to red.

The Item, CheckboxItem, and RadioGroupItem all have the itemStyle. The Item and CheckboxItem additionally also have the itemDisabledStyle prop. Individual radio group items cannot be disabled.

<Dropdown.Menu
    itemStyle="px-2 py-1 hover:primary-500"
    ariaLabel="theme menu" 
    btnStyle="btn-primary" 
    {open}
>
    <!-- Trigger button content -->
    <svelte:fragment slot="dropdown-menu-trigger">
        <span>Theme</span>
    </svelte:fragment>
 
    <!-- Menu content -->
    <Dropdown.Item
        itemStyle="px-2 py-1 hover:error-500"
    >
        Delete theme
    </Dropdown.Item>
</Dropdown.Menu>

All components except for the Dropdown.Menu component have events that you can listen to for updates. Check the API Events section below to see them in more detail.

<Dropdown.Menu
    ariaLabel="theme menu" 
    {open}
>
    <!-- Trigger button content -->
    <svelte:fragment slot="dropdown-menu-trigger">
        <span>Theme</span>
    </svelte:fragment>
 
    <!-- m-click event -->
    <Dropdown.Item 
        on:m-click={doSomething}
    >
        Delete theme
    </Dropdown.Item>
 
    <!-- checked-change event -->
    <Dropdown.CheckboxItem
        checked={dark}
        {checkedIcon}
        on:checked-change={(e) => console.log('checked change', e)}
    >
        Dark Mode
    </Dropdown.CheckboxItem>
</Dropdown.Menu>
ariaLabel
:
string
Set the aria label of the trigger button.
open
:
A writable store that controls whether or not the dropdown menu is open.
preventScroll
:
boolean
=
false
Whether or not to prevent scrolling of the document when the dropdown menu is open.
showArrow
:
boolean
=
false
Show arrow pointing at trigger.
transition
:
=
{ trans: fly, options: { duration: 150, y: -10 } }
The transition for the dropdown menu opening and closing.
loop
:
boolean
=
false
Whether or not the focus should loop back to the first item when the last item is reached.
zIndex
:
string
=
'z-10'
Set the z index of the menu item.
btnStyle
:
string
=
'btn-primary'
Set the trigger button styles.
width
:
string
=
'w-fill'
Set the width of the menu.
menuBgStyle
:
string
=
'surface-50-500'
Set the menu background styles.
menuBorderStyle
:
string
=
'border-1 border-surface-300/70 shadow-md shadow-surface-500/50-300/50'
Set the menu border styles.
itemStyle
:
string
=
'px-2 py-1 select-none rounded-container hover:primary-500/90 focus:primary-500/90'
Set the global item styles for when the item is not disabled. You can overwrite this for each individual item in the item component.
itemDisabledStyle
:
string
=
'px-2 py-1 text-surface-300 cursor-not-allowed'
Set the styles for the disabled item. You can overwite this for each individual item in the item component.
disabled
:
boolean
=
false
Whether or not the checkbox item is disabled.
checked
:
A writable store that controls the checked state of the checkbox. Use this to set the default value.
checkedIcon
:
string
=
''
Set the checked icon.
itemStyle
:
string
=
''
Set the item styles for when the item is not disabled. You can use this to overwrite the global itemStyle prop set in the Dropdown.Menu component.
itemDisabledStyle
:
string
=
''
Set the styles for the disabled item. You can use this to overwrite the global itemDisabledStyle prop set in the Dropdown.Menu component.
disabled
:
boolean
=
false
Set whether or not the item is disabled.
itemStyle
:
string
=
''
Set the item styles for when the item is not disabled. You can use this to overwrite the global itemStyle prop set in the Dropdown.Menu component.
itemDisabledStyle
:
string
=
''
Set the styles for the disabled item. You can use this to overwrite the global itemDisabledStyle prop set in the Dropdown.Menu component.
separatorStyle
:
string
=
'm-2 h-0.5 bg-surface-300/70'
Set the styles for the separator.
value
:
A writable store which controls the value of the selected radio item. Use this to set the default value of the radio group.
checkedIcon
:
string
=
''
Set the checked icon.
value
:
string
The value of the radio item.
itemStyle
:
string
=
''
Set the radio group item styles. You can use this to overwrite the global itemStyle prop set in the Dropdown.Menu component.
disabled
:
boolean
=
false
Whether or not the submenu is disabled.
transition
:
=
{ trans: fly, options: { duration: 150 } }
The transition for the submenu opening and closing.
hideArrow
:
boolean
=
false
Show an arrow from the submenu to the trigger.
width
:
string
=
'w-fit min-w-40'
Set the width of the submenu.