Dropdowns display a list of options that can be triggered by keyboard navigation, submenus and various customisation options.
A dropdown consists of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it.
This component is designed to work well with dropdown items to provide a list of options the user can select from. However, dropdowns can also be used in low‐level applications. The API gives you complete control over showing, hiding and positioning the panel.
<pc-dropdown><pc-buttonslot="trigger"> Dropdown<pc-iconlibrary="default"icon-style="solid"name="chevron-down"slot="suffix"></pc-icon></pc-button><pc-dropdown-item><pc-iconlibrary="default"icon-style="solid"name="scissors"slot="icon"></pc-icon> Cut</pc-dropdown-item><pc-dropdown-item><pc-iconlibrary="default"icon-style="solid"name="copy"slot="icon"></pc-icon> Copy</pc-dropdown-item><pc-dropdown-item><pc-iconlibrary="default"icon-style="solid"name="paste"slot="icon"></pc-icon> Paste</pc-dropdown-item><pc-divider></pc-divider><pc-dropdown-item> Show images<pc-dropdown-itemslot="submenu"value="show-all-images"> Show all images</pc-dropdown-item><pc-dropdown-itemslot="submenu"value="show-thumbnails"> Show thumbnails</pc-dropdown-item></pc-dropdown-item><pc-divider></pc-divider><pc-dropdown-itemtype="checkbox"checked> Emoji shortcuts</pc-dropdown-item><pc-dropdown-itemtype="checkbox"checked> Word wrap</pc-dropdown-item><pc-divider></pc-divider><pc-dropdown-itemappearance="danger"><pc-iconlibrary="default"icon-style="solid"name="trash"slot="icon"></pc-icon> Delete</pc-dropdown-item></pc-dropdown>
CodeEdit
Demos
Getting the selected item
When an item is selected, the pc-select event will be emitted by the dropdown. You can inspect event.detail.item to get a reference to the selected item. If you’ve provided a value for each dropdown item, it will be available in event.detail.item.value.
<divclass="dropdown-selection"><pc-dropdown><pc-buttonslot="trigger"> View<pc-iconlibrary="default"icon-style="solid"name="chevron-down"slot="suffix"></pc-icon></pc-button><pc-dropdown-itemvalue="full-screen">Enter full screen</pc-dropdown-item><pc-dropdown-itemvalue="actual-size">Actual size</pc-dropdown-item><pc-dropdown-itemvalue="zoom-in">Zoom in</pc-dropdown-item><pc-dropdown-itemvalue="zoom-out">Zoom out</pc-dropdown-item></pc-dropdown></div><script>constcontainer=document.querySelector(".dropdown-selection");constdropdown=container.querySelector("pc-dropdown");dropdown.addEventListener("pc-select",(event)=>{console.log(event.detail.item.value);});</script>
CodeEdit
To keep the dropdown open after selection, call event.preventDefault() in the pc-select event’s callback.
Showing icons
Use the icon slot to add icons to dropdown items. This works best with the Icon component.
You can turn a dropdown item into a checkable option by setting type="checkbox". Add the checked attribute to make it checked initially. When clicked, the item’s checked state will toggle.
<pc-dropdownclass="dropdown-checkboxes"><pc-buttonslot="trigger"> View<pc-iconlibrary="default"icon-style="solid"name="chevron-down"slot="suffix"></pc-icon></pc-button><pc-dropdown-itemtype="checkbox"value="show-canvas"checked> Show canvas</pc-dropdown-item><pc-dropdown-itemtype="checkbox"value="show-grid"checked> Show grid</pc-dropdown-item><pc-dropdown-itemtype="checkbox"value="show-source"> Show source</pc-dropdown-item><pc-divider></pc-divider><pc-dropdown-itemvalue="preferences">Preferences…</pc-dropdown-item></pc-dropdown><script>constdropdown=document.querySelector(".dropdown-checkboxes");dropdown.addEventListener("pc-select",(event)=>{if(event.detail.item.type==="checkbox"){console.log(event.detail.item.value,event.detail.item.checked?"checked":"unchecked");}else{console.log(event.detail.item.value);}});</script>
CodeEdit
When a checkable option exists anywhere in the dropdown, all items will receive additional padding so they align properly.
Radio items
You can turn a dropdown item into a radio option by setting type="radio". Radio items can be grouped together using a <div role="group"> container. Only one item in a group can be selected at a time.
If a <div role="group"> container is used, only radio items within the same group are mutually exclusive.
If no <div role="group"> container is used, the radio items are automatically grouped per dropdown layer, but all dropdown items in that layer must be a radio item.
At the root layer, all ungrouped radio items in the root are grouped together.
Inside a submenu, all ungrouped radio items within that submenu are grouped together.
Radio selection does not cross layers, so selecting a radio in a submenu will not affect items in other submenus or the root.
The preferred placement of the dropdown can be set with the placement attribute. Note: The actual position may vary to ensure the panel remains in the viewport.
The dropdown’s size. Type: "small" | "medium" | "large"
"medium"
placement
The placement of the dropdown menu in reference to the trigger. The menu will shift to a more optimal location if the preferred placement doesn’t have enough room. Type: "top"
| "top-start"
| "top-end"
| "bottom"
| "bottom-start"
| "bottom-end"
| "right"
| "right-start"
| "right-end"
| "left"
| "left-start"
| "left-end"
"bottom-start"
distance
The distance of the dropdown menu from its trigger. Type: number
0
skidding
The skidding of the dropdown menu along its trigger. Type: number
0
updateComplete
A read‐only promise that resolves when the component has finished updating.
If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.
CDN (script tag)CDN (import)npm (import)
To manually import this component from the CDN, copy this code snippet and paste it in your HTML.
Whoa! You’ve wandered into the dangerous lands of Placer Toolkit. Version 0 is out of date and doesn’t meet EU privacy standards, including GDPR.
Want the latest powers, security and compliance? Stick with the current version of Placer Toolkit!
Yikes!Power up!
Our site is 100 % cookie‐free! We value your privacy, which is why we don’t store any cookies or personal information related to you.
Your browser history is safe from crumbs, and your data is protected, aligning with modern privacy standards like the GDPR. Enjoy your visit without a single digital cookie in sight! 🍪🚫