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.

Keeping the panel open

The boolean stay-open attribute prevents dismissal when clicking outside the dropdown or on the mobile bottom sheet backdrop. It also works with portaled. The attribute is absent by default, so existing dropdowns continue to close on outside clicks. The stayOpen JavaScript property can change this setting while open without re-rendering the content; setting it to false removes the attribute.

The application provides the X button and calls onClose() from its handler, as shown below. Closing through the trigger, a menu item, or onClose() still works. With trigger="hover", the panel still closes on mouse leave. The attribute itself does not add Escape key handling.

<wje-dropdown id="help-dropdown" stay-open portaled>
  <wje-button slot="trigger">Help</wje-button>
  <div>
    <wje-button id="close-help" label="Close">×</wje-button>
    <p>The help panel stays open while you work on the page.</p>
  </div>
</wje-dropdown>

const dropdown = document.querySelector('#help-dropdown');
const close = dropdown.querySelector('#close-help');
close.addEventListener('wje-button:click', () => dropdown.onClose());

Mobile bottom sheet

The sample switches the dropdown to a mobile presentation with mobile-presentation="bottom-sheet" and mobile-break-point. The backdrop and sheet panel can be styled with CSS custom properties directly on the dropdown usage. On mobile, the content is portaled outside the original layout so it is not clipped by containers with overflow: hidden. The backdrop is available through the exported backdrop part and the panel through popup-native.

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é	-

mobileBreakPoint

Popis	Nastavuje textovú hodnotu uloženú vo voľbe mobile-break-point.
Atribút	mobile-break-point
Typ	string
Predvolené	768

mobilePresentation

Popis	Nastavuje textovú hodnotu uloženú vo voľbe mobile-presentation.
Atribút	mobile-presentation
Typ	string
Predvolené	-

portaled

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

stayOpen

Popis	Vypína zatváranie kliknutím mimo; predvolene je vypnutý.
Atribút	stay-open
Typ	boolean
Predvolené	false

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.
popup-native	Štýluje shadow časť popup-native.
backdrop	Štýluje shadow časť backdrop.

CSS custom variables

Názov	Popis
--wje-popup-backdrop-background	Vlastná CSS premenná na štýlovanie komponentu (popup backdrop background).
--wje-popup-backdrop-opacity	Vlastná CSS premenná, ktorá riadi úroveň priehľadnosti.
--wje-popup-mobile-background	Vlastná CSS premenná na štýlovanie komponentu (popup mobile background).
--wje-popup-mobile-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-popup-mobile-box-shadow	Vlastná CSS premenná, ktorá riadi tieň.
--wje-popup-mobile-max-height	Vlastná CSS premenná, ktorá riadi popup mobile max height.
--wje-popup-mobile-transition-duration	Vlastná CSS premenná, ktorá riadi časovanie animácie a prechodov.
--wje-popup-mobile-transition-easing	Vlastná CSS premenná, ktorá riadi časovanie animácie a prechodov.

Slots

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