Dropdown

shadow

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

The sample shows a basic dropdown with the trigger and menu contents. It's a good starting point for a normal action or navigation menu.

Nested dropdown in the dialog

The demo uses a dropdown as the place from where the user opens a dialog with another dropdown. Clicking on an item in a nested dropdown closes only the inner dropdown and leaves the parent dropdown open.

Display on hover

The sample switches the dropdown from a click to a hover to see both the difference in behavior and the appropriateness of this pattern.

Dropdown with tooltip

This sample shows how to use the wje-dropdown component together with a tooltip to add a short context.

Dropdown with avatar

The demo uses an avatar as a dropdown trigger, which is a typical pattern for profile menus and user actions.

When to use

Use wje-dropdown when you need to immediately communicate the status, result of an action, or next step to the user.

When not to use

Don't use multiple competing feedback channels at the same time for one event.

Accessibility

Communicate message status through appropriate ARIA live regions and manage focus (open/close) for modal elements.

Recommended practices

• Select the severity of the messages (info/success/warning/error) according to the real impact on the user.
• For blocking actions, prefer confirmation only where irreversible change is imminent.
• Set consistent timeouts so the user has time to read the message.

Attributes and properties

active

Popis	Určuje, či je rozbaľovacie menu otvorené.
Atribút	active
Typ	boolean
Predvolené	-

portaled

Popis	Určuje, či je voľba portaled zapnutá a ovplyvňuje správanie komponentu.
Atribút	portaled
Typ	boolean
Predvolené	-

trigger

Popis	Nastavuje textovú hodnotu uloženú vo voľbe trigger.
Atribút	trigger
Typ	string｜string
Predvolené	click

Events

Názov	Popis
wje-dropdown:open	Vyvolá sa pri otvorení komponentu.
wje-dropdown:close	Vyvolá sa pri zatvorení komponentu.

Methods

syncPopupOwner

Popis	Synchronizuje popup owner s externým alebo interným zdrojom stavu.
Signatúra	() => void

syncOwnedContentOwner

Popis	Synchronizuje owned content owner s externým alebo interným zdrojom stavu.
Signatúra	(root?: HTMLElement) => void

getMenuItemOwner

Popis	Vráti menu položku owner z aktuálneho stavu komponentu.
Signatúra	(path: EventTarget[], item: HTMLElement) => HTMLElement｜null

CSS shadow parts

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.

CSS custom variables

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Slots

Názov	Popis
trigger	Slot pre obsah spúšťača.
default	Predvolený slot pre hlavný obsah komponentu.