This example demonstrates how to use a custom element (web component) to implement a dropdown where each option contains a text label and an image.
The custom dropdown can be customized by tweaking some of the example's code.
Note: Only premium Wix users on sites with their own domain and Wix ads removed can work with custom elements.
How We Built It
This example uses a database collection of countries, their labels, and images to display as dropdown options.
We added a custom element to the page. The code for the custom element can be found in the Public section of the site in a file named custom-elements/dropdown.js.
The design for the custom element is defined in the dropdown-design.js module, also in the Public section of the site. It contains the CSS and HTML that define the dropdown's look and feel. You can customize this code to adjust the custom dropdown to fit with your site's design.
To use the the custom dropdown, we've created an API in the dropdown-api.js module, also in the Public section of the site.
The DropdownAPI class has a constructor that takes three parameters:
elem: The custom element the API will control.
itemTemplate: A function that renders the HTML for a single item in the dropdown. It is called for each item in the data array set using the data property.
globalTemplate: A function that renders the full HTML of the dropdown. This HTML is used for both the element's SEO and for displaying the dropdown itself. The function receives an array of HTML fragments generated by calling the itemTemplate function on each item in the data array associated with the custom element.
The DropdownAPI class has two properties:
data: The data to display in the dropdown. The data is assumed to be an array of objects.
css: A CSS string used to set the style tag of the custom element.
APIs We Used
Hire a Developer
Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.
Did this help?
Thanks for your feedback!
Chart.js Custom Element
Use custom elements to implement a chart of countries and votes per country.
Display an alert popup message on the corner of the screen
Stencil Branch Table
Embed a Web Component built using the Stencil framework