Filter Dropdown

Filter dropdowns is an enhanced combination of Filters and Dropdowns. This pattern includes an empty text field and below it, a dropdown list of user generated information. User generated information can be anything from a page, an event, an audience, etc.. Filter dropdowns can be a great way to expose information while leveraging the reductive behavior of filtering. We do this because user generated content can vary in nomenclature and can be hard to discover without exposing the list in its entirety. The main difference between a regular filter and filter dropdown is that the latter allows users to generate NEW content within that experience in the event that none of the options fit.

Do's

Always include placeholder text in the text field such as ‘Filter by page name’. Use a minimum height of 350px. You have the option of including subcategories such as ‘recently used’ or ‘recently created’ within the exposed dropdown list.

Don'ts

The dropdown component should be hidden and only revealed when the user clicks into the text field.

Example of Creating a New Page Titled “jewel”:

Good example of creating a new page.

Hover Panel

The most powerful part of a filter dropdown is the hover panel to the right. This reveals deeper information about the page. Good example of hover panel.