Dropdown2 - Newer tests


Keyboard: Use tab key to select triggers, enter to open menu, escape to close. Once menu is open, use tab/shift-tab or arrow keys for up/down. For menu groups, you can also use left/right to move between menus in the group without needing to activate them separately.

Mouse: click trigger to activate, click outside to close. For menu groups, after the initial click you can open all menus by hovering. Click away to close.

Dropdowns must be explicitly opened and closed.


These are referenced from our test dropdowns.

Simple dropdowns

Standalone button FooBar

Standalone arrowless button

Standalone compact arrowless button

With checkboxes and radios

Open me!

Toolbar and button groups

Grouped inside Toolbar2

Web component dropdown

View profileChange profileLog outCheck this outOption 1Option 2Option 3Option 4Open submenuView profileChange profileLog outCheck this outOption 1Option 2Option 3Option 4

Web component dropdown – async

Web component dropdowns (async, fake server)

Go to google

Custom response

Edit the fields below or click the buttons for sample data. Press 'Reset' to reset the example.

Configure the async dropdown

Sample data

Affect the configuration

The configured async dropdown


Really large text with aand a dropdown embedded in itThis text should be the same size as the bodyOneTwoThree


AtlassianHacker newsGithubChromeFirefoxSafariJavascriptFortranRust


Lorem ipsum.Sit dolor amet.Consectetur adipiscing elit.Donec rutrum.Tortor vel placerat mattis.Fin.OneTwoThreeFourFiveSixSevenEight


Lorem ipsum.Sit dolor amet.

Deprecated behaviours

Lazy dropdown2 trigger

The below dropdown has no attributes added on insert, they're added afterwards. It should work anyway.