Support for pop up anchor

[Velara]

Support for pop up anchor. Also called menu and menu fly out.

Use Case
Greg is a developer working on a new plugin. He wants to provide a few options in his dialog but doesn’t have enough space for a full list box. He uses the new pop up anchor to save space.

[stevekwak]

Can you please confirm what is a “pop up anchor”?

[Velara]

It’s a link that you can wrap around an element that when you click on it shows a list of items (like a dropdown list). It’s the same as if you made a select list invisible and placed it behind other content but when you click on the content it shows the selects items.

Or you could say it’s like a context menu but initiated by a left click event instead of right click.

In code it would look something like:

<a dataprovider="options"><button>Select option</button></a>
<options name="options>
   <option>value 1</option>
   <option>value 2</option>
</options>

[kerrishotts]

You can do something very similar to this now using <menu> and <menuitem>. It takes a little more work to position the context menu in the correct location, but it’s doable.

In the future we’ll have a flyout that makes this even easier.

[aldobsom]

@Velara Sometimes a picture is worth a thousand words. This is a “sometime”

[Velara]

@aldobsom lol I had searched under pop up anchor but didn’t find it. Searching by menu and fly out (ty kerri) I found some screenshots and better descriptions:

From https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/menus:

Menus vs. context menus

Menus and context menus are similar in how they look and what they can contain. In fact, you can use the same control, MenuFlyout, to create them. The difference is how you let the user access it.

When should you use a menu or a context menu?

• If the host element is a button or some other command element whose primary role is to present additional commands, use a menu.
• If the host element is some other type of element that has another primary purpose (such as presenting text or an image), use a context menu.

For example, use a menu on a button to provide filtering and sorting options for a list. In this scenario, the primary purpose of the button control is to provide access to a menu.

If you want to add commands (such as cut, copy, and paste) to a text element, use a context menu instead of a menu. In this scenario, the primary role of the text element is to present and edit text; additional commands (such as cut, copy, and paste) are secondary and belong in a context menu.

Here’s the use cases: