Dropdowns - an overview

[gfellerph]

Content displayed on top of the page that is providing additional actions or a selection of choices to the user. Can contain menus or select lists.

Dropdowns with aria-roles assigned to them

Types of dropdowns:

• Split button: Shows a primary action and a set of related actions in a dropdown menu
• Navigation: Shows a top level navigation item with a set of second level items, can also have third level items
• Select: Set of selectable options, can be single or multiple choice
• Combobox: Input field with a set of selectable options, can be single or multiple choice, user can type to search for options

Dropdown anatomy

Anatomy of different dropdowns

• post-dropdown: A container displayed on top of page content with different options for animation and key bindings as well as a JS interface for opening/closing it (Reference: shoelace dropdown)
• post-menu: A container for menu items with keyboard bindings for arrow keys that move focus between elements (Reference: shoelace menu)
• post-menu-item: A focusable action, can be a link or a button, provides styling options for icons, badges and other things (Reference: shoelace menu item)
• post-navigation: A container for multiple menus, providing keyboard interactions to move focus between different menus (Reference: APG disclosure navigation)
• post-flyout: A container similar to post-dropdown (maybe also a variant of the dropdown?)
• post-listbox: A list of selectable options, either single or multi select, provides key bindings to move focus between elements (Reference: APG Listbox)
• post-option: A selectable option, part of a listbox, provides styling options for icons and badges and possibly other things
• post-option-group: A grouping mechanism for post-option or post-menu-item elements, can have an optional title (Reference: MDN optgroup)
• post-combobox: An input with attached post-listbox in a post-dropdown, can be used to enter free text with suggestions (either restricted to search results or also accepting other inputs). Advanced use cases can include multi select with free text (Reference: APG combobox)
• post-select: A select box with attached post-listbox in a post-dropdown, can be used to select one or multiple options from the list. Advanced selects can have a search input inside the dropdown to filter options (Reference: shoelace select)
• post-split-button: A button with secondary actions in a dropdown (Reference: split button gui challenge)