top of page
Dropdown Custom Element

Dropdown Custom Element

Create a dropdown with text and images using a custom element.

Intermediate.png

Advanced

13K

Published:

February 25, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

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: This is an advanced example, requiring an understanding of HTML, CSS, and JavaScript.

Note:
Only premium Wix users on sites with their own domain and Wix ads removed can work with custom elements.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

Collection


This example uses a database collection of countries, their labels, and images to display as  dropdown options.


Page Elements


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.


Public Files

 

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.

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.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Chart.js Custom Element

Chart.js Custom Element

Use custom elements to implement a chart of countries and votes per country.

Intermediate.png

Advanced

Alert Messages

Alert Messages

Display an alert popup message on the corner of the screen

Intermediate.png

Advanced

Stencil Branch Table

Stencil Branch Table

Embed a Web Component built using the Stencil framework

Intermediate.png

Advanced

Anchor 2
bottom of page