Dropdowns
Dropdowns are overlays which display a list of links while using a small amount of screen real estate. There are several different contexts in which dropdowns are used in NationBuilder.
Default dropdown
Split dropdown
Split dropdowns allow for two interactions on a related function. The left side of the split functions as a button, such as opening a filter, and the chevron on the right is a dropdown displaying a list of related links, such as a list of saved filters.
Icon only dropdown
The icon only dropdown functions identically to the Default dropdown, except that it displays an icon instead of text.
List dropdown
The list dropdown is a powerful specialized interface which allows users to search, select or edit lists as well as create new ones. List names also display a count of how many people exist within that list. It is primarily used within the navigation of the People section.
Path dropdown
The path dropdown is a powerful specialized interface which allows users to search, select and edit Paths, filter by Abandoned, Active, or Completed as well as create a new path. It is primarily used within the navigation of the People section.
Action menu dropdown
True to the name, action menu dropdowns are used to take action on a specific item within a list of items. They are always used with lists of people or on a row within a table, and are accompanied by a batch action dropdown at the top of the list.
When to use the action menu
In general the action menu should not be used to just tuck away any link. It should be limited to internal actions (add/remove from list, delete, add/remove as a follower),or the type of actions that can be done in batch when views allow for an action menu at the top of a list (add everyone to a list, etc).
Best practices
Accessibility
- Indicate menu items with submenus visually and using markup. In the following example, the submenu is indicated visually by an icon and this WAI-ARIA markup:
-
aria-haspopup="true"
declares that a menu item has a submenu. -
aria-expanded="false"
declares that the submenu is hidden.