Whether the button text should update to match the selected item. Default is true. Only applicable for the text-dropdown type.
OptionalcheckedThe default text to display when no item is selected. Defaults to an empty string if nothing is set.
OptionaldirectionThe direction of the droppable relative to the anchor. Defaults to bottom if left undefined.
open - Fired when the dropdown is opened. close - Fired when the dropdown is closed. input - Fired when the dropdown is closed.
The flavor of the dropdown button. Default is "primary".
Array of items to populate the dropdown. Includes label, icon (optional), checked (optional), disabled (optional), and onClick (optional) properties.
Whether the dropdown menu should match the width of its parent. Enabled by default. If disabled, the dropdown menu will size to fit its content.
The name of the dropdown menu button for form control. Default is "default".
Controls the state of the dropdown menu. Default is false.
The type of dropdown. Options are "text-dropdown", "checkbox-dropdown", and "radio-dropdown". Default is "text-dropdown".
StaticstylesInvoked when the component is added to the document's DOM.
In connectedCallback() you should setup tasks that should only occur when
the element is connected to the document. The most common of these is
adding event listeners to nodes external to the element, like a keydown
event handler added to the window.
connectedCallback() {
super.connectedCallback();
addEventListener('keydown', this._handleKeydown);
}
Typically, anything done in connectedCallback() should be undone when the
element is disconnected, in disconnectedCallback().
Invoked when the component is removed from the document's DOM.
This callback is the main signal to the element that it may no longer be
used. disconnectedCallback() should ensure that nothing is holding a
reference to the element (such as event listeners added to nodes external
to the element), so that it is free to be garbage collected.
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('keydown', this._handleKeydown);
}
An element may be re-connected after being disconnected.
ProtectedrenderInvoked on each update to perform rendering tasks. This method may return
any value renderable by lit-html's ChildPart - typically a
TemplateResult. Setting properties inside this method will not trigger
the element to update.
ProtectedfirstInvoked when the element is first updated. Implement to perform one time work on the element after update.
firstUpdated() {
this.renderRoot.getElementById('my-text-area').focus();
}
Setting properties inside this method will trigger the element to update again after this update cycle completes.
Dropdown menus allow users to select an option from a list that appears when the menu is clicked or tapped.
Zeta Dropdown Menu Button places a button that when clicked opens a dropdown menu containing the items passed into it through the items prop.
Figma
https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=22391-10146
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-dropdown--docs