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.

Edit page Styled source

Item Colours

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>

Listening to Events

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>

API

Props

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.

Dropdown.CheckboxItem

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.

Dropdown.Item

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.

Dropdown.Separator

separatorStyle

string

'm-2 h-0.5 bg-surface-300/70'

Set the styles for the separator.

Dropdown.RadioGroup

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.

Dropdown.RadioGroupItem

   
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.

Dropdown.Submenu

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.