Level 3

Editor dropdown menu

Develop a keyboard-accessible dropdown menu for a content editor.


Your Challenge is to create an accessible dropdown menu for a content editor. The user should be able to navigate the menu using the keyboard and view helpful hints for keyboard shortcuts.

Your Challenge is complete when:

  • The component is as close to the original design as possible

  • Elements have the correct state styles (hover, focus, etc.)

  • Using ENTER on the keyboard opens the menu, arrows navigate list items, and using ESC on the keyboard closes the menu and refocuses the menu button

  • The list of items gains focus and becomes keyboard navigable automatically when the menu is opened


Illustration of a computer code

Solutions coming soon

What's included

Challenges include all the assets you would expect from a designer in real-world projects, plus some resources to help you complete the Challenge.

  • Organized Figma design file
  • Detailed desktop, tablet, and mobile layouts
  • Comprehensive design system
  • Relevant fonts, colors, SVGs, and images
  • Alternative Solutions from members
  • Straightforward quick-start guide
  • Recommended list of learning resources
  • Access to community Discord channels