DropdownMenu

This component represents a dropdown menu with a trigger. When the user clicks the trigger, the dropdown menu displays its items.

You can nest MenuItem, MenuSeparator, and SubMenuItem components into DropdownMenu to define a menu hierarchy. The component provides a trigger to display the menu items:

<App>
  <DropdownMenu label="DropdownMenu">
    <MenuItem>Item 1</MenuItem>
    <MenuItem>Item 2</MenuItem>
    <MenuSeparator />
    <SubMenuItem label="Submenu">
      <MenuItem>Submenu Item 1</MenuItem>
      <MenuItem>Submenu Item 2</MenuItem>
    </SubMenuItem>
  </DropdownMenu>
</App>

Try this dropdown menu:

Properties

alignment (default: "start")

This property allows you to determine the alignment of the dropdown panel with the displayed menu items.

Available values:

Available values are:

• start: Menu items are aligned to the start of the trigger component (default).
• end: Menu items are aligned to the end of the trigger component.

<App>
  <HStack>
    <DropdownMenu label="Start-aligned menu (open it!)">
      <MenuItem>Item 1</MenuItem>
      <MenuItem>Item 2</MenuItem>
      <MenuItem>Item 3</MenuItem>
    </DropdownMenu>
    <DropdownMenu label="End-aligned menu (open it!)" alignment="end">
      <MenuItem>Item 1</MenuItem>
      <MenuItem>Item 2</MenuItem>
      <MenuItem>Item 3</MenuItem>
    </DropdownMenu>
  </HStack>
</App>

enabled (default: true)

This boolean property value indicates whether the component responds to user events (true) or not (false).

<App>
  <HStack>
    <DropdownMenu
      enabled="true"
      label="Enabled Dropdown">
      <MenuItem>Item 1</MenuItem>
      <MenuItem>Item 2</MenuItem>
      <MenuItem>Item 3</MenuItem>
    </DropdownMenu>
    <DropdownMenu
      enabled="false"
      label="Disabled Dropdown">
      <MenuItem>Item 1</MenuItem>
      <MenuItem>Item 2</MenuItem>
      <MenuItem>Item 3</MenuItem>
    </DropdownMenu>
  </HStack>
</App>

label

This property sets the label of the component.

triggerButtonIcon (default: "chevrondown")

This property defines the icon to display on the trigger button.

triggerButtonIconPosition (default: "end")

This property defines the position of the icon on the trigger button.

Available values:

triggerButtonThemeColor (default: "primary")

This property defines the theme color of the Button as the dropdown menu's trigger. It has no effect when a custom trigger is defined with triggerTemplate.

Available values:

triggerButtonVariant (default: "ghost")

This property defines the theme variant of the Button as the dropdown menu's trigger. It has no effect when a custom trigger is defined with triggerTemplate.

Available values:

triggerTemplate

This property allows you to define a custom trigger instead of the default one provided by DropdownMenu.

<App>
  <DropdownMenu label="(ignored)">
    <property name="triggerTemplate">
      <Button label="Custom trigger" icon="chevrondown" iconPosition="end"/>
    </property>
    <MenuItem>Item 1</MenuItem>
    <MenuItem>Item 2</MenuItem>
    <MenuItem>Item 3</MenuItem>
  </DropdownMenu>
</App>

Events

willOpen

This event fires when the DropdownMenu component is opened.

<App>
  <variable name="counter" value="{0}" />
  <Text value="Number of times the dropdown was opened: {counter}" />
  <DropdownMenu
    label="Dropdown"
    onWillOpen="counter += 1">
    <MenuItem>Item 1</MenuItem>
    <MenuItem>Item 2</MenuItem>
    <MenuItem>Item 3</MenuItem>
  </DropdownMenu>
</App>

Exposed Methods

close

This method command closes the dropdown.

<App>
  <DropdownMenu id="emojiDropDown" label="Emoji Dropdown">
    <EmojiSelector
      onSelect="(reaction) => { emojiDropDown.close(); }"
      autoFocus="true"
    />
  </DropdownMenu>
</App>

Styling

The DropdownMenu component uses these theme variables to customize its appearance:

• backgroundColor-DropdownMenu
• borderColor-DropdownMenu-content
• minWidth-DropdownMenu
• borderRadius-DropdownMenu
• boxShadow-DropdownMenu
• borderStyle-DropdownMenu-content
• borderWidth-DropdownMenu-content

Theme Variables