Dropdown

The Dropdown component shows content in a pop-up menu. It is often used together 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>

Source

Placement

Use the placement attribute to control where the dropdown opens.

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>

Source

Trigger Method

Use the trigger attribute to set how the dropdown opens.

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>

Source

Open on Pointer

Add the open-on-pointer attribute to open the dropdown at the pointer position. It is often paired with trigger="contextmenu" to open a context menu on right-click.

Right-click here to open the menu

Item 1

Item 2

<mdui-dropdown trigger="contextmenu" open-on-pointer>
  <mdui-card slot="trigger" style="width:100%;height: 80px">Right-click here to open the menu</mdui-card>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Source

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>

Source

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>

Source

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 how the dropdown opens. Multiple space-separated values are supported. Possible values: `click`: Triggers on click. `hover`: Triggers on mouse hover. `focus`: Triggers on focus. `contextmenu`: Triggers on right-click or 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 dropdown position. Possible values: `auto`: Automatically determined. `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`
Prevents the dropdown from closing when a `<mdui-menu-item>` is clicked.
`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 pointer 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`
Container for the element that triggers the dropdown; this is the `trigger` slot container.
`panel`
The container of the dropdown content.

CSS Custom Properties

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

Divider

Fab