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

dropdown_default

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.

dropdown_split

Icon only dropdown

The icon only dropdown functions identically to the Default dropdown, except that it displays an icon instead of text.

dropdown_icon_only

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.

dropdown_list

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.

dropdown_path

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.

dropdown--chevron

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).

Answer

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.