Dropdown
Dropdown element is used to display the context menu after clicking the button. Allows the user to select one of the predefined options. It contains a Button element that acts as an activator and a Menu element with content in the form of individual MenuItem. items.
Basic usage
This example shows a basic dropdown with a trigger and menu content. It is a good starting point for common action or navigation menus.
Dropdown with dialogue
This example uses a dropdown item to trigger a follow-up action, specifically opening a dialog.
Display on hover
This example switches the dropdown from click-based opening to hover so the behavior difference is easy to compare.
Dropdown with tooltip
This example shows how the wje-dropdown component can work together with a tooltip for additional context.
Dropdown with avatar
This example uses an avatar as the dropdown trigger, which is a common pattern for profile menus and user actions.
When to use
Use wje-dropdown to communicate status, result of actions, or required next steps immediately.
When not to use
Do not show multiple feedback channels for the same event unless there is a strong reason.
Accessibility
Announce status updates with suitable ARIA live regions and manage focus for modal interactions.
Best Practices
- Match message severity (info/success/warning/error) to actual user impact.
- Use confirmations only for destructive or hard-to-reverse actions.
- Keep timeouts consistent so users have enough time to read messages.
Attributes and Properties
active
| Description | Controls whether the dropdown is currently open. |
| Attribute | active |
| Type | boolean |
| Default | - |
portaled
| Description | Sets or removes the 'portaled' attribute on the element. When the value is truthy, the attribute 'portaled' is added to the element. When the value is falsy, the attribute 'portaled' is removed from the element. |
| Attribute | portaled |
| Type | boolean |
| Default | - |
trigger
| Description | Sets the text value stored in trigger. |
| Attribute | trigger |
| Type | string｜string |
| Default | click |
Events
| Name | Description |
|---|---|
wje-dropdown:open | Event fired when the dropdown is opened. |
wje-dropdown:close | Event fired when the dropdown is closed. |
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
native | The native part of the dropdown. |
CSS Custom Properties
No CSS custom properties available for this component.
Slots
| Name | Description |
|---|---|
trigger | The slot for the trigger of the dropdown. |
default | The default slot for the dropdown. |