Skip to main content

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

Display on hover

Attributes and Properties

placement

DescriptionSets the location of the drop-down menu. The options are "start", "end", "top", "bottom".
Attributeplacement
Typestring
Default"start"

offset

DescriptionSpecifies the distance of the context menu from the button.
Attributeoffset
Typenumber
Default0

trigger

DescriptionSpecifies how the dropdown is activated. The values can be "click" or "hover".
Attributetrigger
Typestring
Default"click"

tooltip

DescriptionText that appears as a tooltip when hovered over an element.
Attributetooltip
Typestring
Defaultundefined

collapsible

DescriptionIf true, the dropdown will automatically close when the menu item is clicked.
Attributecollapsible
Typeboolean
Defaultfalse

Events

NameDescription
wje-dropdown:openIt is emitted when the dropdown menu is opened.
wje-dropdown:closeIt is emitted when the dropdown menu is closed.

Methods

BeforeShow

DescriptionMethod executed before the dropdown menu is displayed.
Signature() => Promise<any>

AfterShow

DescriptionMethod executed after the dropdown menu is displayed.
Signature() => Promise<void>

beforeClose

DescriptionMethod executed before closing the dropdown menu.
Signature() => Promise<void>

afterClose

DescriptionMethod executed after closing the dropdown menu.
Signature() => Promise<void>

CSS Shadow Parts

NameDescription
nativeRefers to the div element inside the dropdown

CSS Custom Properties

NameDescription
--wj-dropdown-backgroundDropdown menu background colour
--wj-dropdown-border-radiusRounding the edges of the dropdown menu
--wj-dropdown-border-widthDropdown menu border width
--wj-dropdown-border-colorDropdown menu border colour
--wj-dropdown-box-shadowShadow dropdown menu
--wj-dropdown-widthDropdown menu width
--wj-dropdown-min-widthMinimum dropdown menu width
--wj-dropdown-max-widthMaximum dropdown menu width

Slots

NameDescription
triggerAn element that serves as a trigger for displaying the dropdown menu.
``The contents of the dropdown menu.