Icon in dropdown items?

Is it possible to include icon in dropdown item ?

I think the items in a dropdown component can only be plain strings AFAIK.

However, without too much trouble, you could make your own dropdown menu using a repeating panel.

That is,

  • the items in the repeating panel can be links with icons

  • a link’s click event would set the selected value and place it in an outside label (or link), just like the standard dropdown component.

  • use the visibility property to control the expanding/collapsing of the repeating panel.

I hope that helps.

1 Like

However, without too much trouble, you could make your own dropdown menu using a repeating panel.

Yes, this is a great way to do it. Here’s a clone link that shows how that might look:

https://anvil.works/build#clone:GZZQCCCE62QXV6OR=7Z3UYAKIQEHSWLKVTQZSDN7I

It looks like this:

Here’s what I did:

  • Create a dropdown using a Label and Button inside a ColumnPanel, and a RepeatingPanel
  • To make up the dropdown items, populate the RepeatingPanel with a dictionary of text and icons
  • Set the initial visible property of the repeating panel to False

Then, to make the dropdown work:

  • Make the RepeatingPanel visible when the dropdown Button is clicked - this populates the dropdown with labels and icons
  • When a link is clicked, display its label and icon at the top of the dropdown
  • Hide the RepeatingPanel

Hope this helps, let me know if you have any questions!

3 Likes