Icon in dropdown items?

Anvil Q&A
1

Is it possible to include icon in dropdown item ?

2

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
3

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:

It looks like this:
dropdown-icons

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