Dropdown Custom Element

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

Code Level

Advanced

Published

 

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: You can only use custom elements on premium sites without ads.

Example Code

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.

APIs We Used

Related Articles

Related Examples

Add to Cart Gallery

Let customers to add products to their cart

INTERMEDIATE

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER