Dropdown
Collaborate with us
Edit this page on GitHub
Allow end users to make a choice from several options.
Use the Dropdown to offer a choice of more than four options. For a very large number of options, consider using the Dropdown Select to avoid loss of context.
How to use
Fill in the label of the Dropdown and add the required links in the DropdownList placeholder.
-
Drag the Dropdown pattern into the preview.
-
Set your content in the placeholders.
- Publish and test.
Input Parameters
| Input Name | Description | Type | Mandatory | Default Value |
|---|---|---|---|---|
| ExtendedClass | Add custom style classes to this Block. | Text | False | none |
Layout and Classes
CSS Selectors
| Element | CSS Class | Description |
|---|---|---|
| .dropdown | .is--hidden | Defines if the dropdown list is closed |
| .dropdown | .is--visible | Defines if the dropdown list is open |
Advanced Use Case
Use with ListRecords to make a list of links
-
Drag the Dropdown Pattern into the page.
-
In the DropdownList placeholder, drag a ListRecords widget.
- Set the Line Separator property of the ListRecords widget to None.
- In the ListRecords widget, drag a link and connect it to the required destination.
- Inside the List, use expressions to display the content.
- In the Prompt placeholder, set the text you want to define as the prompt.
- Publish and test.
