Dropdowns
How to add and style dropdowns.
What Are Dropdowns?
Dropdowns, also known as dropdown menus or dropdown lists, are interactive UI components. They typically consist of a clickable element (often a button, an icon, or an avatar) that, when activated, displays a list of selectable options in a dropdown menu or any information you want to display when opened, that appears below or above it.
Location in the Parts Library: Base Parts > Actions > Dropdown
Why Are Dropdowns Useful?
Dropdown parts are useful for several reasons. They can:
Conserve Space: Dropdowns are efficient for conserving screen space, especially when dealing with a large number of options. Instead of displaying all options at once, they only reveal the options when needed, reducing clutter on the interface.
Organize Information: Dropdowns help organize information into categorized lists, making it easier for users to find and select the desired option from a structured menu.
Simplify Navigation: Dropdown menus simplify navigation by providing users with a hierarchical structure of options. This allows users to quickly navigate through different levels of information without overwhelming them with all options simultaneously.
Reduce Cognitive Load: By presenting options in a dropdown menu only when requested, users are not bombarded with excessive information upfront, reducing cognitive load and decision fatigue.
Examples of where you might typically see dropdowns include:
In navigation menus including navbars and drawers
Within menu parts
Next to text, shown in a 'help' icon so that more information can be displayed
Adding the Dropdown
Choose the dropdown most closely aligned with what you need from the Parts Library.
Choose your preferred dropdown variation, select the part where you’d like to add your dropdown, and click ‘+ add to page’.
Styling the Clickable Part of the Dropdown
In the parts library, the clickable parts containing dropdowns are mostly buttons, but we can also have dropdowns from icons and avatars.
For Buttons:
Style the button by selecting it to open the property panel on the right, and using the Button Editors, style the button as needed for color, shape, size, and any other properties as needed. Update the text within the button.
For Avatars:
Style the avatar by selecting it to open the property panel on the right, and using the Avatar Editors, style the avatar as needed by replacing the image or text, and changing the color, shape, size, and any other properties as needed.
For Icons:
Style the icon by selecting it to open the property panel on the right, and using the Icon Editors, style the icon as needed by replacing the icon, and changing its color and size as needed.
Styling A Dropdown
The dropdown size can be set based on device size, and the foreground and background colors set.
Placement of the Where the Dropdown Opens
The dropdown can be positioned to open at the top, bottom, left and right of the part, and a range of combinations using the dropdown editor, and selecting 'Placement':
Here are two examples of dropdown placement in action. The first dropdown placement is "Left End". The second dropdown placement is "Bottom End".
An Example: Adding a Dropdown to a Navbar, and Moving it Into Position
Let's say you want to add a dropdown to a navbar. You want the dropdown to be added to the position that is second from the right within the navbar and to match the look of the buttons in the navbar.
The steps taken to achieve this are:
Select the navbar
Go to the parts library, and choose the dropdown that is most appropriate for the navbar
Add the dropdown part. The dropdown is added to the end of the navbar by default.
Select the button (the part that contains the dropdown) and move it to the left using the arrow keys in the property editing panel, so that it's in the correct position.
Select the text within the button, go to the Decoration Editor in the right property panel, and change the font family and size until it reflects the same as the other buttons in your navbar. This is where you would also change the placeholder text to make it your own, using the Text Editor in the right property panel.
Select the button, and change the variant to 'Ghost' so that the button is transparent, matching the other buttons.
Editing the Contents of the Dropdown
While it is most usual for the dropdown to contain links, such as in a menu, the dropdown can contain whatever you want to reveal when the dropdown is clicked.
To add contents to the dropdown, select the 'Dropdown' part. This will open the dropdown property panel in the right menu. Add any parts from the part library to the dropdown.
To edit the contents of the dropdown, select the part to be edited, which will open the relevant parts' property panel.
The Components of a Dropdown Containing a List
For the dropdowns in the Parts Library that contain a list, it's important for you to know their structure. The dropdown (parent) houses a menu, which houses menu items (children). There may be multiple menu items, each containing links, together with the relevant text for that link.
The following shows the key parts within a dropdown and their parent/child relationship:
Adding Additional Dropdown Items
To add a dropdown item to a dropdown, select an existing item, and duplicate it using the edit menu in the top toolbar. Here's how:
Then edit and link the item as needed.
Editing the Link Text
The text within the link is edited the same as the way text is edited in other parts, using both the Text Editor and the Font Editor in the property editing panel on the right.
Linking the Dropdown Items
To add a link to your dropdown item, first select the text that needs to be linked, then navigate to the parent part which is "Link". On the right property editor panel, select 'link to', and you'll see the current list of pages within your app that you can link to. If the page you want to link to within your app hasn't been created yet, select 'new page'. You'll then be prompted to complete some details for your new page. You can also link to an external URL.
Adding an Icon to Your Dropdown Item
To add an icon to your dropdown list, select the link part. Then add an icon. The icon will be added to the end of the link. To change the position of the icon, select the icon, and using the property editing panel, go to 'Slot position', and choose 'prepend'.
Related Information
Last updated
Was this helpful?