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 Position

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

Trigger Method

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

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.

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/Close Delay

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

API

Properties

AttributePropertyReflectTypeDefault
openopenbooleanfalse

Opens the dropdown.

disableddisabledbooleanfalse

Disables the dropdown.

triggertrigger'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.
placementplacement'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-clickstayOpenOnClickbooleanfalse

Keeps the dropdown open after clicking an <mdui-menu-item>.

open-delayopenDelaynumber150

Sets the delay (in ms) for opening the dropdown on hover.

close-delaycloseDelaynumber150

Sets the delay (in ms) for closing the dropdown on hover.

open-on-pointeropenOnPointerbooleanfalse

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.

MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons