UI Action Menu Dropdown design

Share with

Public

Shared with anyone who has the link

Limited to workspace

Shared with anyone in your workspace

Private

Only accessible to you

A fun little menu UI design. This is styled like a <select> but it is actually a <menu>, because the element is performing actions instead of changing a value.

Based on the design/concept by CJ (@CJfromJBW) from her tweet.
I also added light/dark modes.

I'm using Javascript to sync the <button> & <menu> with a hidden <select> element. And using ARIA for accessibility. (Although I haven't fully tested, so it might not be complete for this demo)

Light Theme Dark Theme

Made by Simey