The old way to add a Pen to a Collection was a dropdown <select> menu. Hey, I like browser-native UI as much as the next person, but there comes a point where you want to offer a more robust UX around an action. That's what we've done with the new Add to Collection interface.

This video should explain pretty clearly in 3 minutes:

The most important things to know:

  • Your most recently used Collections are right at the top of the list
  • It will show you all Collections the Pen is already a part of
  • You can (fuzzy) search for Collections easily
  • You can add to multiple collections at a time
  • You get some extra context about the Collection while you are in there (a screenshot of the most recently added Pen, and how many Pens are in there)
  • You can create-and-add-to a Collection on-the-fly
  • This new interface is available on every grid on the site, and the editor, and more views that it wasn't before

Big improvement, we think.