Dropdown

The Dropdown component displays specific content in a pop-up control. It is often used in conjunction with the Menu component.

Usage

Import the component:

import 'mdui/components/dropdown.js';

Import the TypeScript type:

import type { Dropdown } from 'mdui/components/dropdown.js';

Example:

open dropdown

Item 1

Item 2

<mdui-dropdown>
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Examples

Disabled State

Add the disabled attribute to disable the dropdown.

open dropdown

Item 1

Item 2

<mdui-dropdown disabled>
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Code

Open Position

Set the placement attribute to control the dropdown's open position.

open dropdown

Item 1

Item 2

<mdui-dropdown placement="right-start">
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Code

Trigger Method

Set the dropdown's trigger method with the trigger attribute.

open dropdown

Item 1

Item 2

<mdui-dropdown trigger="hover">
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Code

Open on Pointer

Add the open-on-pointer attribute to open the dropdown at the pointer location. This is often combined with trigger="contextmenu" for right-click menu activation.

Open the menu here with the right mouse button

Item 1

Item 2

<mdui-dropdown trigger="contextmenu" open-on-pointer>
  <mdui-card slot="trigger" style="width:100%;height: 80px">Open the menu here with the right mouse button</mdui-card>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Code

Keep Menu Open

By default, clicking a menu item in the dropdown component closes it. Add stay-open-on-click to keep it open.

open dropdown

Item 1

Item 2

<mdui-dropdown trigger="click" stay-open-on-click>
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Code

Open/Close Delay

With trigger="hover", use open-delay and close-delay to set the open and close delays.

open dropdown

Item 1

Item 2

<mdui-dropdown trigger="hover" open-delay="1000" close-delay="1000">
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Code

API

Properties

Attribute	Property	Type	Default
`open`	`open`	`boolean`	`false`
Opens the dropdown.
`disabled`	`disabled`	`boolean`	`false`
Disables the dropdown.
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'contextmenu' \| 'manual' \| string`	`'click'`
Defines the trigger method for the dropdown. Supports multiple space-separated values. Possible values: `click`: Trigger on click. `hover`: Trigger on mouse hover. `focus`: Trigger on focus. `contextmenu`: Trigger on right-click or touch long press. `manual`: If used, the dropdown can only be opened and closed programmatically, and no other trigger methods can be specified.
`placement`	`placement`	`'auto' \| 'top-start' \| 'top' \| 'top-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'auto'`
Sets the position of the dropdown. Possible values: `auto`: Automatically determine the position. `top-start`: Above and left-aligned. `top`: Above and centered. `top-end`: Above and right-aligned. `bottom-start`: Below and left-aligned. `bottom`: Below and centered. `bottom-end`: Below and right-aligned. `left-start`: Left and top-aligned. `left`: Left and centered. `left-end`: Left and bottom-aligned. `right-start`: Right and top-aligned. `right`: Right and centered. `right-end`: Right and bottom-aligned.
`stay-open-on-click`	`stayOpenOnClick`	`boolean`	`false`
Keeps the dropdown open after clicking an `<mdui-menu-item>`.
`open-delay`	`openDelay`	`number`	`150`
Sets the delay (in ms) for opening the dropdown on hover.
`close-delay`	`closeDelay`	`number`	`150`
Sets the delay (in ms) for closing the dropdown on hover.
`open-on-pointer`	`openOnPointer`	`boolean`	`false`
Opens the dropdown at the cursor position. This is typically used for context menus.

Events

Name
`open`
Emitted when the dropdown starts to open. Can be prevented with `event.preventDefault()`.
`opened`
Emitted after the dropdown has opened and the animations are completed.
`close`
Emitted when the dropdown starts to close. Can be prevented with `event.preventDefault()`.
`closed`
Emitted after the dropdown has closed and the animations are completed.

Slots

Name
(default)
The content of the dropdown.
`trigger`
The element that triggers the dropdown, such as an `<mdui-button>` element.

CSS Parts

Name
`trigger`
The container of the element that triggers the dropdown, i.e., the container of the `trigger` slot.
`panel`
The container of the dropdown content.

CSS Custom Properties

Name
`--z-index`
The CSS `z-index` value of the component.

Tabs

Up Next