Dropdown
Javascript requiredUtilize the dropdown functionality which can be attached to any element such as a button or a link, and on click, to reveal a menu (or a list)
Introduction
The dropdown component is a versatile user interface element that allows users to select from a list of options presented in a collapsible menu. It is commonly used to save space and provide a clean and organized user experience. Dropdowns are widely employed in web applications and websites to offer various choices to users without cluttering the interface.
There is a key element that distinguishes a dropdown from a select. The dropdown is attached to another component as a trigger. It is a UI element that is triggered with JavaScript and not a native HTML component.
Visual representation
The following is a visual representation of the dropdown in use along with it's code usage.
If you need to display a dropdown menu upon clicking on another element, ensure to include the ` data-dropdown-toggle="dropdownId" ` data attribute to the said element (e.g., a button) responsible for activating the dropdown.
Control the width of the menu that opens by adding the necessary width class to the dropdown menu element.
Code structure
This code includes a button element with the id ` dropdownButton ` and a ` data-dropdown-toggle="dropdown" ` attribute. When this button is clicked, it will trigger the dropdown menu to appear by triggering the open state on the HTML container with the id ` id="dropdown" `.
<!-- Button to trigger the dropdown -->
<button id="dropdownButton" data-dropdown-toggle="dropdown" class="aegov-btn" type="button">
...Text...
<svg class="w-4 h-4 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none" />
<polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="16" />
</svg>
</button>
<!-- Dropdown menu -->
<div id="dropdown" class="aegov-dropdown hidden w-52">
<div class="dropdown-body text-aeblack-600">
... body content ...
</div>
</div>
This component depends on the use of JavaScript. The structure of code defined will work out-of-box if the bundled JavaScript library of AEGov-Design-System is utilized.
Using this JavaScript library is not mandatory. You may choose your preferred library as well, however you are required to style the component as per the example provided.
Variations
Variations are different versions of this component that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.
Dropdown with only 2 languages
This variation is for a simple dropdown when only 2 languages to be used.
With header, divider and icon
This variation includes a header section at the top of the dropdown, a divider separating different sections, and an icon to enhance the visual representation. It is useful for situations where the dropdown needs to be more descriptive and organized.
With icons only
This variation includes the ability to add icons to each menu item without any dividers or header.
With divider only
This variation includes an example where the menu has sections with dividers, and we can control the shade of the divider by changing the colour used.
For this example, we are using a different colour combination of menu items and the divider. We are using the ` divide-primary-100 ` and ` text-primary-600 ` classes on the ` dropdown-body ` class.
With checkbox component
The checkbox component variation is an example of how to embed a form component within the dropdown menu. This variation allows users to use the dropdown and interact with the website or web application by selection on checkboxes.
This variation is useful when you want a certain set of options (in the form of checkboxes) hidden from the view and only visible when a dropdown is triggered by a user.
Custom UI as menu
You may style the dropdown to be a creative menu as well. A custom UI that may be required for your website or web application is possible within the body of the dropdown.
This variation is an example of a dropdown with menu items with descriptive text. It is recommended to use this option when there are explainations required for the links.
Trigger on hover
A dropdown may be triggered on click or hover. By default, the event attached to a dropdown is a click. You may override this by using the ` data-dropdown-trigger="{hover|click}" ` strribute.
The variation does not really affect the dropdown but rather the trigger element. You may apply the hover event and utilize any of the other variations for the dropdown as well.
For the purpose of this example, we will use a simple dropdown body content and attach the hover event on the button. Give it a try!
Placement
The dropdown element can be controlled in terms of it's placement. The default position is bottom. By using the ` data-dropdown-placement="{top|right|bottom|left}" ` attribute on the trigger element, you can override the default behaviour and customize the placement of the dropdown.
Also, remember that an auto placement is applied by default on the dropdown along with bottom as the first choice. What this means is that if there is not enough space in the viewport for the dropdown to reveal itself, it will auto switch to top as the placement.
This feature is a fallback and will work by detecting the space in the viewport. The placement will switch only if the viewport does have more space on top.
Behaviour
The dropdown component is a creative way to provide the user with a collapsable menu. This menu can have content and links along with other components.
In order to effectively use the dropdown for your website or web application, you must consider the following:
- Initialization: The dropdown component should be initialized when the DOM is ready. When using the AEGOV-scripts JavaScript, the initialization will find all the elements with the attribute
` data-dropdown-toggle="" `and attach click event listeners to them. - Visibility: By default the dropdown should be hidden, and revealed only when the trigger element (e.g., button) is clicked or hoverred on.
- Hide dropdown (click outside): When the dropdown menu is open, clicking outside the dropdown on any part of the page, the dropdown should close and not be visible.
- Trigger type: The dropdown component supports different trigger elements such as button, links etc. and can be triggered by both - click and hover events. Then the event type is hover, the dropdown must close and not be visible once the element is no longer hoverred on.
Accessibility
Ensuring accessibility is a crucial aspect of the dropdown component to make it usable and inclusive for all user's
One may think that a JavaScript triggered element will not be accessible, however study shows that over 99.03% of all visitors to website have JavaScript enabled in their browser.
Hence, we must further ensure that the component itself is accessible and can be made usable with keyboards and assistive technologies. The following are accessibility considerations made for this component;
- The dropdown uses semantic HTML elements such as
` <div> `and` <ul> `with` <li> `for list items. This helps screen readers and assistive technologies understand the structure and purpose of the content. - The
` <button> `element, acting as the trigger includes the "id" attribute set to` aria-labelledby `which adds a custom ARIA attribute. This helps screen readers identify the element as a dropdown trigger and understand its interactive behavior. - The text content inside the trigger button and the dropdown menu should be meaningful and descriptive. Meaningful text aids users in understanding the purpose of the dropdown and its options.
- Users should be able to navigate and interact with the dropdown using only the keyboard. The trigger element must be triggered using the "Enter" or "Space" keys on the keyboard. The dropdown should be operable using the "Tab" key to focus on the trigger and arrow keys to navigate through the options.
RTL support
This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.
The following is an example of this component with text in Arabic.
All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.
The typography guidelines will also provide further information on use of the font stack for the Arabic language.
Usage
While dropdowns are prevalent and practical, it's essential to ensure they are implemented accessibly and that they enhance the user experience. Overusing dropdowns or nesting them too deeply can complicate navigation and frustrate users.
Where to use a dropdown?
Here are common use cases where a dropdown would be appropriate.
- Navigation of the website would be the most appropriate place to add a dropdown. Refer to the Navigation component to learn more about primary website navigations.
- On user profile access. On websites where users can log in, an icon or username in the header often acts as a dropdown trigger.
- For multilingual or multi-region websites, a dropdown in the header or footer allows users to switch between different languages.
- Additional information for search.
- In web forms, dropdowns can replace select boxes in certain cases.
- Websites use dropdowns for lists of actions related to specific items. This is refered to an Action Menu.
